一次性能优化思考过程

前言

最近业务上空闲了下来,也是把之前在开发时自身感受比较大的白屏时间放在了主线上去排查优化,这里记录一下笔者对于移动端vConsole脚本的引入问题全过程。

网络脚本与问题定位

对于白屏时间,与网络传输有很大关系,如图:

image.png

这是performance中一张生产环境的网络加载图,FP高达3.3秒的样子第一眼非常鲜明的vConsole印入眼帘,并且占了2.6秒,阻塞了主线程的渲染,而此类调试工具也根本不需在生产引入,在日常和预发环境需要用到,因此定位项目代码,发现问题点代码块:

image.png

这里也是离职同学写的代码,这里其实写了和没写一样,最占资源的脚本在各个环境还是都引入了(38行),我们稍微改造一下代码块,给它变成动态加载vConsole的形式:

image.png

改造完毕后在日常和预发环境维持目前生产的状况,而生产环境有了飞跃性的提效:

优化前:
image.png

优化后:

image.png

扫描二维码关注公众号,回复: 15131520 查看本文章

可以发现,在脚本用时少了很多。

文末

这只是一次很简单的性能优化实操记录,主要记录的是思考过程、优化切入点(白屏or交互)和指标分析(网络用时or帧动画),代码其实没写多少,但是有了这样的思考过程会有无数的细小优化点等着去被发现和优化。

猜你喜欢

转载自blog.csdn.net/m0_46995864/article/details/130733663