H5加载优化
今日头条品质优化 - 图文详情页秒开实践
从输入URL到页面加载的全过程
页面加载时间 = 页面加载完成时间 - 页面开始加载时间
- webview loadFinish回调,实际上是在页面加载完毕阶段，而 DOM 构建完成时页面结构就已经基本渲染完成。
用户真实体验的角度，以DOM 结构构建完成（即 domReady）作为页面加载完成时间点。
一般来说，webview 渲染需要经过如下几个步骤
- 解析 HTML 文件
- 加载 JavaScript 和 CSS 文件
- 解析并执行 JavaScript
- 构建 DOM 结构
- 加载图片等资源
- 页面加载完毕
白屏问题
有很多场景都可能导致详情页发生白屏，比如说网络异常，WebView 异常等等
模板优化
从点击到看到页面内容需要经历如下几个阶段：
- 创建WebView
- 加载Html
- 加载JS、CSS
- 加载内容数据
- 页面渲染
中间3步，属于网络阶段，极易受到网络波动影响，无法保证成功率。
解决办法：
- 把公共的样式和逻辑JS都抽离出来，形成独立模板，并内置于客户端中
- 和客户端约定好JS接口，通过接口把数据注入，而数据请求交个客户端。
模板预热
完全脱离了网络加载后，页面加载速度的瓶颈就在本地模板的加载时间。
- 模板合并， 将JS和CSS还有一些图片，内联到一个文件中，减少IO操作次数
- 模板简化，将部分非必须脚本异步化拉取
模板复用
- 当模板和数据分离后，每次加载的都是同一个模板。
- 因此在合适的时机在后台创建 WebView，并且提前预热加载模板，当用户点击进入页面的时候就能使用已经加载好模板的 WebView，直接将详情页的内容数据通过 JS 注入到页面中，前端收到数据后进行页面渲染即可。
- 使用完当前 WebView 之后，只需要在用户退出页面的时候把正文数据清空，这样进入下一个页面的时候就能够继续复用这个 WebView 重新注入数据即可。
网络优化
不变的内容托管到CDN
渲染优化
当我们在模板层和网络层优化到极致的时候，限制我们的就是 WebView 的渲染速度了！
服务端预渲染
- 通过接口把JSON数据注入给前端，前端还需要转化为HTML标签,再让WebView渲染，导致耗时久
解决办法 ：
在服务端就会把所有的详情页正文的 HTML 数据组装好
客户端渲染
- 非文字内容比如说图片和视频类资源的渲染对于 WebView 来说渲染效率比较差
- 对于 WebView 的渲染内存占用和滑动体验也有问题
- 如果用户多次打开同一篇文章，这篇文章中的图片也会存在多次加载的问题，无法与客户端进行缓存共享，对用户的流量也是一种浪费
解决办法：
将图片和视频等非文字内容通过原生组件的方式放在客户端进行渲染
例如，界面上部是原生View,下面是WebView.
