【字节大牛疯狂教学】QQ音乐Android客户端Web页面通用性能优化实践！(2)

结语

• 现在随着短视频，抖音，快手的流行NDK模块开发也显得越发重要，需要这块人才的企业也越来越多，随之学习这块的人也变多了，音视频的开发，往往是比较难的，而这个比较难的技术就是NDK里面的技术。
• 音视频/高清大图片/人工智能/直播/抖音等等这年与用户最紧密，与我们生活最相关的技术一直都在寻找最终的技术落地平台，以前是windows系统，而现在则是移动系统了，移动系统中又是以Android占比绝大部分为前提，所以AndroidNDK技术已经是我们必备技能了。
• 要学习好NDK，其中的关于C/C++，jni，Linux基础都是需要学习的，除此之外，音视频的编解码技术，流媒体协议，ffmpeg这些都是音视频开发必备技能，而且
• OpenCV/OpenGl/这些又是图像处理必备知识，下面这些我都是当年自己搜集的资料和做的一些图，因为当年我就感觉视频这块会是一个大的趋势。所以提前做了一些准备。现在拿出来分享给大家。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

• 无法规避 WebView 初始化耗时
• 受限于 WebView 生命周期范围

从客户端角度，除了思考优化 WebView 初始化耗时之外，还可以从 “扩展前端生命周期” 的角度出发，思考优化方案。

2. 跨端优化的局限

现有跨端优化方案，包括离线包、VasSonic 等，为了达到最好的优化效果，均需要前端终端共同参与改造。这导致存量页面的逻辑改造增加，对线上页面不够友好，引入额外的成本和风险。在前端开发资源不足时，这些优化的开展存在一定难度。

从减少前端开发工作量的角度来看，需要思考更具通用性、前端感知更小的优化方案。

3. 目标

基于本次优化的背景，本次优化提出以下两方面的目标：增强通用性、减少前端改造成本。

二、指标设计

在展开优化思路和实施的同时，需要建立衡量优化效果的性能指标。

1. 客户端现有性能指标数据

接下来基于客户端内 Web 页面加载过程，描述客户端现有性能指标代表的时机。

（1）客户端 WebView 回调

基于 Android WebView 的过程监控回调和页面框架能力，可以实现的性能监控包括：

其中，onMainFrameFinished 取第一个非主请求 (HTML) 的资源被拦截的时机。对于绝大多数页面来说，此时已经完成主请求 (HTML) 的下载，并已经开始解析；可以粗略代表主请求流程结束。

（2）W3C Performance Timing

与客户端回调相比，W3C Performance Timing 提供了更细致的加载过程信息，但是不包含 WebView 开始初始化的时间点。下图中仅列出部分：

2. 各端单独采集的局限

（1）前端采集的局限

• 无法独立获取 WebView 开始初始化的时间点。
• 想获取最精确的加载完成时间点，主要依赖手动埋点。

（2）客户端采集的局限

SSR (服务端渲染) 和 CSR (客户端渲染)，页面内容可消费的时间点不一致。

对 WebView 页面加载周期来说：

• CSR 页面需在前端页面框架加载后再展示数据，内容请求完成并上屏，发生在页面加载完成之后
• SSR 页面的首次内容上屏可携带首屏数据，因此在页面加载完成之前，页面内容已经可以被消费
  

客户端回调时机不够完整或过于“苛刻”，测不准“页面内容可消费”的时间点。

通过追溯客户端 onPageFinished 的回调时机，发现对应的 Blink 代码要求必须满足：页面解析完毕、 没有正在下载的资源等条件。

按照这个标准，一旦存在某个图片一直处在加载中，但页面框架的其他内容均已处理完毕，onPageFinished 回调也会等待图片加载完成才回调，与实际上的 “页面内容可消费” 时间点存在差异。

3. 指标设计方案

结合上述分析，可以确定：

• 最准确的页面加载完成时机来自前端
• 最准确的 WebView 初始化时机来自客户端

因此，完善的耗时测量需由客户端和前端协同完成。

（1）前端侧

前端自行完成结束时间点的设置，并从客户端获取 WebView 初始化时间点，统计上报打开耗时。

• 前端通过手动埋点或监听 DOM 节点数变更，获取加载完成时间点。
• 前端统计时调用客户端提供 JSAPI，获取以 WebView 初始化时间点作为起点的耗时。
• 并由前端完成加载耗时的计算和统计上报。

（2）客户端侧

作为一个补充方案，客户端可以通过 JavaScript 注入获取上述 W3C Performance Timing 中的 domInteractive 时间点，作为结束时间点。

• 前端 domInteractive 时，已完成所有页面展示必需资源的请求和处理
• 耗时的差异，可以体现任何页面的客户端通用优化效果
• 可以衡量SSR(服务端渲染) 页面的可消费耗时，和CSR(客户端渲染)页面的首帧耗时

webView.evaluateJavascript(

script = “(function(){return performance.timing.domInteractive;})();”,

callback = { value ->

responseEndDuration = value.toLong() - getOnCreateTimestamp()

}

)

虽然 WebKit 负责维护 Performance Timing 的值，但是 WebView 并未提供接口获取上述时间点的值。

三、优化方案和效果

1. 优化方案概述

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

• TBS (X5 内核) 环境预加载
• WebView 实例池
• 主请求并行加载
• Web 公共资源池
• 跟肤逻辑优化

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

2. 优化手段说明

（1）WebView 初始化

最后

文章不易，如果大家喜欢这篇文章，或者对你有帮助希望大家多多点赞转发关注哦。文章会持续更新的。绝对干货！！！

• Android进阶学习全套手册
  关于实战，我想每一个做开发的都有话要说，对于小白而言，缺乏实战经验是通病，那么除了在实际工作过程当中，我们如何去更了解实战方面的内容呢？实际上，我们很有必要去看一些实战相关的电子书。目前，我手头上整理到的电子书还算比较全面，HTTP、自定义view、c++、MVP、Android源码设计模式、Android开发艺术探索、Java并发编程的艺术、Android基于Glide的二次封装、Android内存优化——常见内存泄露及优化方案、.Java编程思想 （第4版）等高级技术都囊括其中。

• Android高级架构师进阶知识体系图
  关于视频这块，我也是自己搜集了一些，都按照Android学习路线做了一个分类。按照Android学习路线一共有八个模块，其中视频都有对应，就是为了帮助大家系统的学习。接下来看一下导图和对应系统视频吧！！！
  

• Android对标阿里P7学习视频

• BATJ大厂Android高频面试题
  这个题库内容是比较多的，除了一些流行的热门技术面试题，如Kotlin，数据库，Java虚拟机面试题，数组，Framework ，混合跨平台开发，等
  

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

，那么很难做到真正的技术提升。**

需要这份系统化学习资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！