VasSonic

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 等，为了达到最好的优化效果，均需要前端终端共同参与改造。这导致存量页面的逻辑改造增加

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 等，为了达到最好的优化效果，均需要前端终端共同参与改造。这导致存量页面的逻辑改造增加

为了让WebView访问快，一般都是用缓存技术，关于缓存这里有一篇文章讲的很详细 Android：手把手教你构建 WebView 的缓存机制 & 资源预加载方案 ，请务必看看 其实http协议有自身的缓存机制，android这边通过简单配置就可以实现，缓存一般说的都是对web静态资源缓存，如html，js，css，png，jpg，gif等； 缓存配置主要是web前端和后台设置， 缓存配置主要是web前端和后台设置， 缓存配置主要是web前端和后台设置， 重要的话需要说3遍，如果前端和后台没有配置缓存的话，一般http服务器有默认的配置，如Etag，Last-Modified字段，但是默认没有配置Cache-Control,或者Expires字段，那还是要和服务器通信的 Android WebView自身缓存 Android WebView自身缓存，也就是http协议缓存，这里有个很大缺陷是缓存空间大小不能修改，缓存大小默认是剩余空间的1/8，个人觉得不够灵活，所以这块需要改进 Android WebView缓存改进 通过拦截所有静态资源请求，然后对其改进,通过覆盖WebViewClient下面的方法： @Override public WebResourceResponse shouldInterceptRequest(WebView view, String url){