腾讯音乐移动端页面通用性能优化实践
前端迷
共 4235字,需浏览 9分钟
· 2020-09-12
一、问题与目标
1. 前端优化的局限
无法规避 WebView 初始化耗时 受限于 WebView 生命周期范围
2. 跨端优化的局限
3. 目标
二、指标设计
1. 客户端现有性能指标数据
(1)客户端 WebView 回调
其中,
onMainFrameFinished
取第一个非主请求 (HTML) 的资源被拦截的时机。对于绝大多数页面来说,此时已经完成主请求 (HTML) 的下载,并已经开始解析;可以粗略代表主请求流程结束。
(2)W3C Performance Timing
2. 各端单独采集的局限
(1)前端采集的局限
无法独立获取 WebView 开始初始化的时间点。 想获取最精确的加载完成时间点,主要依赖手动埋点。
(2)客户端采集的局限
CSR 页面需在前端页面框架加载后再展示数据,内容请求完成并上屏,发生在页面加载完成之后 SSR 页面的首次内容上屏可携带首屏数据,因此在页面加载完成之前,页面内容已经可以被消费
3. 指标设计方案
最准确的页面加载完成时机来自前端 最准确的 WebView 初始化时机来自客户端
(1)前端侧
前端通过手动埋点或监听 DOM 节点数变更,获取加载完成时间点。 前端统计时调用客户端提供 JSAPI,获取以 WebView 初始化时间点作为起点的耗时。 并由前端完成加载耗时的计算和统计上报。
(2)客户端侧
前端 domInteractive
时,已完成所有页面展示必需资源的请求和处理耗时的差异,可以体现任何页面的客户端通用优化效果 可以衡量SSR(服务端渲染) 页面的可消费耗时,和CSR(客户端渲染)页面的首帧耗时
webView.evaluateJavascript(
script = “(function(){return performance.timing.domInteractive;})();”,
callback = { value ->
responseEndDuration = value.toLong() - getOnCreateTimestamp()
}
)
虽然 WebKit 负责维护 Performance Timing 的值,但是 WebView 并未提供接口获取上述时间点的值。
三、优化方案和效果
1. 优化方案概述
TBS (X5 内核) 环境预加载 WebView 实例池 主请求并行加载 Web 公共资源池 跟肤逻辑优化
2. 优化手段说明
(1)WebView 初始化
(2)客户端自建缓存
(3)公共资源内联
单线程模型导致读写性能下降 被拦截资源的数量越多,对性能的影响越容易被放大
公共资源加载到热缓存后,转换为对应的 HTML 节点 主请求并行加载完成后,直接在主请求字节流中替换其对应的外联节点;替换后的新字节流返回 WebView
3. 优化效果
加载耗时降低 26.2% (1932ms → 1426ms) 跳出率降低 停留时长中位数增加
四、跨端场景的瓶颈与对策
1. 前终端通信通道效能不足,考虑 “少次多量”
WebView 通道不支持较大量级数据的传递 通信线程多为单线程,甚至需要在主线程发起或处理通信 对传递次数的敏感程度大于对传递数据总量的敏感程度
2. 扩展生命周期
3. 精简 / 前置公共库代码
五、总结与展望
[1] 微信小程序的双线程模型:
评论
人工智能周刊#18:微软发布手机端大模型、Llama 3 中文模型列表、苹果开源新项目、
主打尊重隐私的搜索引擎 duckduckgo,也推出了 ai chat 服务,可以使用 chatgpt 或者 claude机器学习周刊:关注 Python、机器学习、深度学习、大模型等硬核技术本期目录:1、Qwen1.5-110B:Qwen1.5 系列的首个千亿参数开源模型2、苹果开源
机器学习算法与Python实战
0
热搜第一,腾讯又一游戏停运了!
腾讯又有一款游戏要停运了。最近,腾讯游戏宣布:由于游戏的代理协议即将到期,《食物语》将于2024年6月18日11:00停止在中国大陆地区的运营。并且这次的停运话题一度冲上热搜榜第一位,引发网友热议。据了解,《食物语》是一款中华美食拟人的国风女性向RPG养成手游,于2019年9月份公开测试,运营至今已
逆锋起笔
0
从原理到实践:掌握DPDK内存池技术
前言:本文整理下之前的学习笔记,基于DPDK17.11版本源码分析。主要分析一下内存管理部分代码。一、概述内存管理是数据面开发套件(DPDK)的一个核心部分,以此为基础,DPDK的其他部分和用户应用得以发挥其最佳性能。本系列文章将详细介绍DPDK提供的各种内存管理的功能。但在此之前,有必要先谈一谈为
开源Linux
0
Vite 4.3 为何性能爆表?
大厂技术 高级前端 Node进阶点击上方 程序员成长指北,关注公众号回复1,加入高级Node交流群Vite 4.3 相比 Vite 4.2 取得了惊人的性能提升,下面和大家分享一下 Vite 4.3 性能大幅提升的幕后技术细节,深度阅读,全程高能
程序员成长指北
0
接口响应慢?那是你没用 CompletableFuture 来优化!
来源:blog.csdn.net/qq_43372633/article/details/130814200👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0
小哈学Java
3
魔改Transformer!9种提速又提效的模型优化方案
向AI转型的程序员都关注了这个号👇👇👇Transformer目前已经成为人工智能领域的主流模型,应用非常广泛。然而Transformer中注意力机制计算代价较高,随着序列长度的增加,这个计算量还会持续上升。为了解决这个问题,业内出现了许多Transformer的魔改工作,以优化Transformer
机器学习AI算法工程
0
【性能监控】如何有效监测网页静态资源大小?
前言作为前端人员肯定经常遇到这样的场景:需求刚上线,产品拿着手机来找你,为什么页面打开这么慢呀,心想自己开发的时候也有注意性能问题呀,不可能会这么夸张。那没办法只能排查下是哪一块影响了页面的整体性能,打开浏览器控制台一看,页面上的这些配图每张都非常大,心想这些配图都这么大,页面怎么快,那么我们有没有
高级前端进阶
0
Linux系统性能优化:七个实战经验
来源公众号:twt社区IT社区原文链接:https://mp.weixin.qq.com/s/Rey0gSnnj-zoAEwE6J-GjwLinux系统的性能是指操作系统完成任务的有效性、稳定性和响应速度。Linux系统管理员可能经常会遇到系统不稳定、响应速度慢等问题,例如在Linux上搭建了一个w
开源Linux
1