QQ音乐Android客户端Web页面通用性能优化实践 (2)

基于客户端内 Web 页面的加载流程,从 “WebView 初始化耗时优化”、“资源加载耗时优化”、“逻辑处理耗时优化” 三个方面,提出了 5 个优化项。

TBS (X5 内核) 环境预加载

WebView 实例池

主请求并行加载

Web 公共资源池

跟肤逻辑优化

QQ音乐Android客户端Web页面通用性能优化实践

各优化项在 Web 页面加载过程中的生效时机如下:

QQ音乐Android客户端Web页面通用性能优化实践

2. 优化手段说明 (1)WebView 初始化

经过前期分析,WebView 初始化耗时本身的耗时压缩空间比较有限。因此优化手段主要以初始化逻辑前置为主。例如,“WebView 实例池” 通过在应用位于后台、主线程卡顿影响不明显的时机进行 WebView 预初始化,置换启动 Web 页面时的初始化耗时。

(2)客户端自建缓存

为了实现前述各项资源加载优化,客户端需要独立于 WebView 的缓存机制,自建一个资源缓存。

自建缓存参考客户端常用的三级缓存机制,基于 WebView 的强生命周期,设计了 “冷-热缓存循环” 的缓存生命周期。

QQ音乐Android客户端Web页面通用性能优化实践

例如,在 WebView 初始化的同时,自建缓存把页面需要的资源从文件系统加载到内存;向 WebView 资源拦截回调输入字节流时,自建缓存一定从内存缓存中输出,输出完毕后即可立即从内存缓存中被清除。这一机制可以使内存缓存的淘汰更积极,字节流在内存中停留的时间更短,减少内存占用。

(3)公共资源内联

在完成公共资源池开发后,页面打开耗时出现了负优化的情况。经过分析,确定与资源拦截回调的性能瓶颈有关。

单线程模型导致读写性能下降

被拦截资源的数量越多,对性能的影响越容易被放大

因此,为了减少资源拦截回调的性能影响,从减少拦截次数的角度,引入了公共资源内联优化。

公共资源加载到热缓存后,转换为对应的 HTML 节点

主请求并行加载完成后,直接在主请求字节流中替换其对应的外联节点;替换后的新字节流返回 WebView

QQ音乐Android客户端Web页面通用性能优化实践

引入公共资源内联后,基本抵消了资源拦截回调的性能影响,页面加载耗时提升 3.2%。

3. 优化效果

QQ 音乐 Android 端内评论页:

加载耗时降低 26.2% (1932ms → 1426ms)

跳出率降低 

停留时长中位数增加

QQ音乐Android客户端Web页面通用性能优化实践

四、跨端场景的瓶颈与对策

基于在 WebView 场景下的优化过程,推及跨端场景可能存在的类似问题,本文尝试给出一些跨端场景中可能的性能瓶颈及应对方式。

1. 前终端通信通道效能不足,考虑 “少次多量”

跨平台方案 (WebView、React Native 等) 普遍存在前终端通信通道效能不足的问题。

WebView 通道不支持较大量级数据的传递

通信线程多为单线程,甚至需要在主线程发起或处理通信

对传递次数的敏感程度大于对传递数据总量的敏感程度

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wpxwxs.html