一次性能优化思考过程

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

您好,如果喜欢我的文章,可以关注我的公众号「量子前端」,将不定期关注推送前端好文~

前言

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

网络脚本与问题定位

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

image.png

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

image.png

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

image.png

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

优化前:
image.png

优化后:

image.png

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

文末

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

目录
打赏
0
0
0
0
31
分享
相关文章
性能优化:提升系统效率的关键
性能优化:提升系统效率的关键
105 1
|
7月前
|
系统性能优化总结
系统性能优化总结
99 10
|
9月前
|
一次性能优化实践
【5月更文挑战第21天】为解决在线教育平台在高并发下数据库查询响应时间增加的问题,开发者采用Redis缓存策略。通过数据分层、LRU淘汰策略、异步更新及监控调优,成功提升性能,缓存命中率超90%,页面加载时间从3秒降至1秒,改善了用户体验。此实践强调了合理缓存策略、监控调优以及考虑数据访问模式在系统设计中的重要性。
87 2
如何提升写入效率?Schemaless 写入性能优化实践分享
TDengine 是一款时序数据库,其Schemaless模式适应物联网数据动态变化。通过分析火焰图,发现parser和insert操作是性能瓶颈。优化措施包括减少标签解析、排序和子表生成的重复执行,提前判断schema变更,改进数据插入方法,减少内存分配和拷贝。通过这些优化,如在3.0版本中,line协议性能提升了2.5倍,telnet提升2倍,json提升近5倍。使用工具如火焰图和perf进行性能分析,以识别和解决瓶颈,实现性能提升。
55 0
性能优化方案及思考
周末闲暇在家,朋友让我帮忙优化一个接口,这个接口之前每次加载都需要40s左右,经过优化将性能提了10倍左右;又加了缓存直接接口响应目前为300ms左右,于是将自己的优化思路整理总结一下
我工作中用到的性能优化全面指南(2)
使用WebGL进行3D渲染 WebGL是一种用于进行3D渲染的Web标准,它提供了底层的图形API,并且能够利用GPU进行加速,非常适合于进行复杂的3D渲染。
121 0
我工作中用到的性能优化全面指南(1)
在Web开发中,Web的性能优化是一个重要的话题。无论是页面加载速度,用户体验,或者是程序运行效率,都与Web的性能优化息息相关。 最小化和压缩代码 在构建过程中,为了减少文件的大小和加载时间,通常会对JavaScript代码进行最小化和压缩处理。这包括移除不必要的空格、换行、注释,以及缩短变量和函数名。工具如UglifyJS和Terser等可以帮助我们完成这个任务。
78 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等