QQ音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,然而页面的打开耗时与 Native 页面相距甚远,需要系统性优化。本文将介绍 QQ 音乐 Android 客户端在进行 Web 页面通用性能优化过程中的问题、思路、方案和效果,并尝试对跨端场景的常见瓶颈和对策进行归纳。文章作者:关岳,QQ音乐客户端开发工程师。
一、问题与目标
作为一款注重于内容运营的应用程序,QQ 音乐 Android 客户端的 Web 页面日均 PV 达到千万量级,评论页、MV 页等核心页面均有 Web 页面参与,或完全由 Web 实现。
客户端内 Web 页面的打开耗时与 Native 页面相距甚远,需要系统性优化。然而,现有的前端和跨端优化方案,存在一定局限性。
1. 前端优化的局限
针对 Web 页面的耗时优化,在优化思路、方案、服务、工具链等方面都已经建设得非常详细。然而,在客户端内 Web 页面这一场景,纯前端优化存在以下两个局限:
- 无法规避 WebView 初始化耗时
- 受限于 WebView 生命周期范围
从客户端角度,除了思考优化 WebView 初始化耗时之外,还可以从 “扩展前端生命周期” 的角度出发,思考优化方案。
2. 跨端优化的局限
现有跨端优化方案,包括离线包、VasSonic 等,为了达到最好的优化效果,均需要前端终端共同参与改造。这导致存量页面的逻辑改造增加,对线上页面不够友好,引入额外的成本和风险。在前端开发资源不足时,这些优化的开展存在一定难度。
从减少前端开发工作量的角度来看,需要思考更具通用性、前端感知更小的优化方案。
3. 目标
基于本次优化的背景,本次优化提出以下两方面的目标:增强通用性、减少前端改造成本。
二、指标设计
在展开优化思路和实施的同时,需要建立衡量优化效果的性能指标。
1. 客户端现有性能指标数据
接下来基于客户端内 Web 页面加载过程,描述客户端现有性能指标代表的时机。
(1)客户端 WebView 回调
基于 Android WebView 的过程监控