今日头条品质优化 - 图文详情页秒开实践

[ParsifalC]

推荐收录

链接

https://mp.weixin.qq.com/s/Xqr6rQBbx7XPoBESEFuXJw

理由

[此处填写您的推荐理由]

推荐人信息

如果收录这个资源，我们会在点评后面说明推荐信息人。

[JonyFang]

🐕 今日头条品质优化 - 图文详情页秒开实践

@JonyFang：本篇总结了头条详情页（WebView）的加载优化的思路和实践。内容总结如下：

• 数据建立
  • 确定优化效果的度量为：页面加载时间
  • 白屏检测方案：WebView 快照 -> 缩放 -> 非白色像素点检测
  • 确定用户刷头条时真实体验的指标：95 分位值
• 模板优化
  • 模板拆分
    • 公共样式 CSS 和逻辑 JS 抽离为独立模板，内置到客户端中
    • 客户端请求接口拿到正文数据，并通过 JS 脚本注入页面完成展示
    • 用户进入详情页加载本地模板，并行请求详情页数据并注入模板
    • 通过一定策略预加载数据并暂存
  • 模板预热
    • 全流程离线化后，进行本地模板加载优化
    • 模板合并。将 JS、CSS、图片内联到一个文件以减少加载模板时的 IO 操作
    • 模板简化。非必要样式和 JS 异步拉取
    • 在合适的时机在后台创建 WebView 并预加载模板，用户进入详情页时使用加载好模板的 WebView 并将内容数据通过 JS 注入页面，收到数据后前端渲染
  • 模板复用
    • 详情页使用同一个模板，当用户退出页面时把正文数据清空，在进入喜爱个页面时复用这个 WebView 重新注入对应正文数据
• 网络优化
  • CDN 加速
    • 详情页请求特点：流量大、数据属性基本不变、用户分布广、接口数据大
    • 将正文、标题、作者栏等主要又基本不变的内容托管到 CND
  • 容灾
    • 多域名备份。服务端下发多个 CDN 链接，某个访问异常时可以快速切换
    • 快速访问。设计了详情页请求的快速动态超时策略（因子 1.5，min = 1s，max = 4s），保证在网络或服务异常时，用户快速感知到自身网络问题。
• 渲染优化
  • 服务端预渲染
    • 详情页首屏内容在服务端就把所有正文的 HTML 数据组装好，服务端直出内容给客户端 WebView 渲染。
  • 客户端渲染
    • WebView 中非文字内容（图片、视频）通过原生组件渲染
    • Feed 页智能加载详情页需要的多图
• 白屏优化
  • 网络导致的页面白屏问题，通过前面的优化策略已解决
  • 非网络原因的白屏（WebView 占用内存过大发生的白屏），先判断是否存在数据注入，若没有进行请求重试，接着重新加载模板并注入数据。