庞锦贵 信息流内容页“闪开”优化总结

2020-03-01 200浏览

  • 1.0.3秒完成渲染！ 信息流内容⻚页“闪开”优化总结 庞锦贵 阿里UC-国内信息流 / 前端
  • 2.在此键入姓名 在此键入tittle
  • 3.在此键入姓名 在此键入tittle
  • 4.⾃自我介绍 • 部门：阿里UC事业部 - 国内信息流 • 职责：前端业务负责人 UC 浏览器器⼯工具线 信息流内容线 图⽂文线 UC浏览器器 视频线 夸克浏览器器 UGC线
  • 5.⽬目录 • 项⽬目概述 • ⽅方案设计 • 移动架构设计 • 前端架构演进 • 效果对⽐比及总结
  • 6.Part 1：“闪开”优化项⽬目概述
  • 7.场景
  • 8.⽬目标 点击打开正文 → 直出体验(无白屏)，动画流畅(不卡顿)
  • 9.已有优化 Image PreFetch First image request WebView animation Click WebView init LoadURL 主要场景 CSR duration 300ms LoadHTML Painting (First paint) JavaScript Scripting Painting (First screen) T2 Data PreFetch Ajax Data request End
  • 10.遗留留问题 • 主⽂文档没有缓存 • Data PreFetch命中率低 • 前端技术栈⽼老老旧，冗余，发版的性能抖动明显
  • 11.Part 2：优化的⽅方案设计过程
  • 12.容器器的选择 性能 跨端 Weex 跨平台 排版 H5 成本
  • 13.H5优化的⽅方向 SSR 前端性能优化的⽅方向：PWA和SSR都是可选项，但还有其他的选择吗？ ?
  • 14.PWA的问题 1.进⼊入启动流程 2.分派进程/ 线程 4.启动 SW 线程 3.加载sw.js 5.通知启动完成 步骤 覆盖安装, ⾸首次启动 重启浏览器器, ⾸首次启动 不不退出浏览器器, 再次启动 步骤1 2ms 1ms 1ms 保持⻚页⾯面不不关闭, 锁屏→开屏→启动SW 1ms 步骤2 265ms 151ms 37ms 56ms 步骤3 757ms 37ms 20ms 108ms 步骤4 33ms 29ms 23ms 186ms 步骤5 2ms 2ms 2ms 1ms 总耗时 1059ms 220ms 83ms 352ms ① PWA对信息流业务有⽤用的只有ServiceWorker； ② SW的启动和保活成本⼤大，耗时100~1000ms； ③ SW缓存本质也是HttpCache，从内核⻆角度，它不不是最快的。
  • 15.SSR是最好的选择吗？ 如果SSR是解决Web性能问题的最优⼿手段， 它能对⻬齐Native的性能吗？
  • 16.假设正⽂文是Native的，它到底是多快？ 动画(从右向左滑出) 点击 创建Window END 开始渲染 100ms 闪开体验 ⾸首屏渲染完成 300ms 点击到⾸首屏完成的耗时 ≤ 300ms
  • 17.⾸首屏渲染的阶段分拆 WebView Animation Click WebView init Native的耗时 LoadURL LoadHTML ⽹网络的耗时 Painting (First paint) JavaScript Scripting 渲染的耗时 Painting (First screen) T2 End
  • 18.分拆后的优化分析 • Native的耗时可以优化吗？ • ⽹网络的耗时可否消除？ • 渲染的耗时可以优化吗？
  • 19.重新理理解⻚页⾯面的渲染 UI⻚页⾯面 加载模板和数据 组装数据和模板 F模板（Data数据） ⽣生成HTML⽂文档 浏览器器 渲染
  • 20.渲染的最短路路径 设置到MemoryCache WebView内核 将数据回传到内核 理理论的 最优路路径 Y 1、读取Core MemoryCache 404! If find resource Y If find resource 渲染 启动⽹网络请求 Y IO拦截请求 If find resource 2、读取离线资源缓存 If find resource 3、读取Http Cache Y
  • 21.模板和数据预处理理的时机 其他业务 启动 ⾸首⻚页 信息流 刷新列列表 点击打开 Timing Timing Timing 下载模板 下载数据 组装数据和模板 正⽂文
  • 22.Part 3：NSR预渲染的移动架构设计
  • 23.信息流的⻚页⾯面特征 • ⻚页⾯面的类型是有限的 • ⽤用户很少会反复阅读同⼀一篇⽂文章 • 同类⽂文章的⻚页⾯面结构是相同的 同类⽂文章的URL和数据不不相同， 但模板相同。
  • 24.渲染流程设计 WebView 点击 WebView init 列列表 Ajax Request 加载CSS/JS 执⾏行行JS AJAX数据 排版 & 渲染 异步JS模块 内核的内存缓存 WebView预创建 Native Scroll in viewpoint 加载HTML 离线模板 Ajax Data (JSON) HTML预渲染 Native Render HtmlData MemoryCache （App外壳）
  • 25.渲染流程对客户端的诉求 离线模板 加载和管理理 数据预加载 预渲染Server 缓存匹配
  • 26.移动端预渲染架构 业务层 图⽂文⻚页 API层 信息流容器器 评论⻚页 dayu xss 资源 预处理理服务 WebView容器器 离线缓存管理理服务 U4内核 配套服务层 FEA 视频⻚页 Sonic UPass UpdatePlat CDN
  • 27.⻚页⾯面缓存处理理 UcCore MemoryCache App Client ⻚页⾯面模板+数据https://mparticle.uc.cn/article.html?aid=12345&cid=100&… html Codehttps://image.uc.cn/s/uae/g/1y/infoflow/assets/css/IflowPageWemedia.1b19593e.css CSS Codehttps://image.uc.cn/s/uae/g/1y/infoflow/assets/js/IflowPageWemedia.e2d86c74.js JS Codehttps://m.uczzd.cn/webview/news?aid=5678&cid=100&… html Codehttps://mparticle.uc.cn/article.html?aid=5678&cid=100&… html Code ⻚页⾯面预渲染 HTML设置到 MemoryCache
  • 28.⻚页⾯面访问前的渲染缓存处理理 Native Render后将 结果替换占位符 预渲染的 JSBundle
  • 29.Part 4：三端同构的前端架构演进
  • 30.渲染流程对⽐比 离线缓存 + 预加载 NSR Load HTMLString NSR预渲染 ⾸首屏 From Cache (JSBundle-for-nsr) 主⽂文档离线缓存 + DataPrefetch CSR LoadURL Load HTMLString SSR LoadURL 请求主⽂文档 From Cache Ajax Data From Prefetch SSR渲染 (JSBundle-for-ssr) CSR渲染 (JSBundle-for-csr) 下载主⽂文档 ⾸首屏 ⾸首屏
  • 31.预渲染的延伸问题 NSR预渲染 ⾸首屏JSBundle NSR 拿到离线模板和数据后的流程 CSR 当没有拿到数据的兜底兼容流程 SSR 没有离线资源情况下的⾸首屏优化 ⾜足够⼩小，三端同构
  • 32.前端的解法是什什么 性能 原⽣生JavaScript ？ 效率 React组件化
  • 33.优化前的前端架构 业务层 图⽂文 视频⻚页 图集 配套服务 版本存储服务 SDKLoader JSSDK版本校验API层 CI构建 微服务层 正⽂文SDK 相关推荐SDK 评论SDK …… 微服务 开发/测试环境 基础类库 Zepto Vue uc-jsdk Webpack + ES5/6 + ESlint 优点 1. 解决了了不不同类型⻚页⾯面相同功能的代码逻辑统⼀一问题； 2. 每个SDK微服务均可⾃自发布； 3. 有效降低了了业务的迭代维护成本。 不不⾜足 …… ⼯工程脚⼿手架 CLI 1. SDK微服务需要⼤大量量的前置依赖，对⾸首屏没有正向的优化； 2. 多个SDK是串串⾏行行加载； 3. 每个SDK是独⽴立的代码仓库，代码管理理是个难题。
  • 34.优化后的前端架构 组件⽅方案：⾸首屏PureJSX + ⾮非⾸首屏Preact Pages ⾃自媒体 视频⻚页 转码图⽂文 …… FEA PureJSX Component Components Base Component ⾸首屏渲染优化 配套⼯工具链 Sonic Native render H5 render Server render Preact Component UpdatePlat PureJSX Modules Framework jssdk PureJSX Lazyload Preact storage Webpack version TypeScript TSLint …… Lerna UFE ⼯工程体系 Native Node Server (V8 runtime) (Egg)
  • 35.PureJSX是什什么 ⼀一个没有Vdom的但保留留最⼩小组件周期的React实现。 只有1KB。
  • 36.⾸首屏最⼩小化 ✦ 通⽤用类库移除或异步： ⾸首屏仅依赖PureJSX来实现逻辑，Preact则在异步Chunk中才会引⼊入； ✦ ⾸首屏模块语法约束： ⾸首屏仅使⽤用兼容ES5的语法，避免引⼊入polyfill，⽽而⾮非⾸首屏部分则不不做限制； ✦ 重新定义⾸首屏的功能： 将⾸首屏所包含事件绑定、统计上报等逻辑全部移到异步chunk中，⾸首屏只做展示渲染。
  • 37.⾸首屏改造的前后对⽐比 - 改造前 改造后 前置依赖 polyfill、zepto、vue、uc-jssdk、tracker、 lazyload、sdkLoader PureJSX ⾸首屏功能 标题、作者信息(关注功能的实现)、正⽂文、 图⽚片Lazyload、正⽂文相关统计 标题、作者信息(仅展示)、正⽂文 ⾸首屏Size 主⽂文档：36KB / 13KB CSS：40KB / 12KB JS：600KB / 230KB 主⽂文档：1.3KB / 0.6KB CSS：18KB / 8KB JS：30KB / 12KB
  • 38.Part 5：优化效果对⽐比及总结
  • 39.优化前后的对⽐比 T2平均值 T2闪开率 错误率 ⼈人均CTR 优化前 优化后 318ms 0 → 79% 0.2% → 0.01% +3.6% 1515ms →
  • 40.优化后 优化前
  • 41.各优化策略略的贡献 1600 1515 1200 1100 800 800 650 450 400 320 0 初始值 离线缓存 ⾸首屏最⼩小化 WebView预创建 数据预加载 NSR预渲染
  • 42.优化策略略的逻辑 前端 问题 模板离线 内核策略略 离线⽅方向 ⾸首屏最⼩小化+同构 Native预渲染 数据离线 从前端开始到前端结束，⼤大量量⼯工作是⾮非前端实现的， 但整个过程需要前端视⻆角进⾏行行串串联。 前端 成果
  • 43.NSR的本质 UI⻚页⾯面 = F模板(Data数据) Native 离线资源 展现 预加载 NSR JSBundle HTML 模版 V8 Runtime JSON 数据 NSR取SSR和CSR之优点，但⼜又避免了了两者的不不⾜足； 本质上相当于分布式SSR，但⼜又不不增加服务器器的压⼒力力。 内存缓存
  • 44.优化的成本和⻛风险 数据预加载 技术实现
  • 45.前端开发者的挑战 • 深刻理理解浏览器器的渲染原理理和缓存机制 • 要跳出某个端范畴来思考整体的最优策略略 • 优化⼿手段不不局限于已有的经验
  • 46.优化的⽅方法论 将模板和数据分拆处理理，并尽可能保障⽤用户触达前获取， 然后根据场景选择合适的组装“地点”。 App Client Web Client NSR CSR Server Service Work SSR
  • 47.在此键入姓名 在此键入tittle
  • 48.在此键入姓名 在此键入tittle
  • 49.THANKS THANKS！ THANKS！