pwindy  
在完成任务的同时,还需要不断“复盘”,不论你多么的忙,都需要留下时间思考,可以思考哪些地方做的好,哪些地方我们可以改进,应该如何改进,注重总结才是王道

一、为什么要进行性能优化

对于一个产品来说,用户的体验是最重要的。当页面加载时间过长,交互操作不流畅时,会给用户带来很糟糕的体验,会导致用户流失。

二、前端常见的性能优化手段

对于前端来说,性能优化可以从两个大方面来解决。本篇详述第一种:减少耗时。

2.1.时间角度优化:减少耗时(用户的等待时长)

页面加载耗时、渲染耗时、网络耗时、脚本执行耗时

2.2.空间角度优化:降低资源占用(页面卡顿或者卡死)

CPU占用、内存占用、本地缓存占用

 三、浏览器页面加载过程

减少耗时的性能优化与浏览器的页面加载过程紧密联系。浏览器页面加载过程分为以下几个步骤:

  1. 网络请求,服务端返回HTML内容。
  2. 浏览器一边解析HTML,一边进行页面渲染。
  3. 解析到外部资源,会发起HTTP请求,加载JavaScript代码时会暂停页面渲染。
  4. 根据业务代码加载过程,会分别进入页面开始渲染、渲染完成、用户交互等阶段。
  5. 页面交互过程中,会根据业务逻辑进行逻辑运算、页面更新。

四、耗时优化---网络请求优化

网络请求优化:减少网络资源的请求和加载耗时

4.1.减少DNS查询时间

使用浏览器的DNS缓存、计算机DNS缓存、服务器DNS缓存。

4.2.合理的使用CDN,有效的减少网络请求耗时

4.3.对请求资源进行缓存

包括但不限于使用浏览器缓存、HTTP缓存、后台缓存,使用Service Worker、PWA等技术。

4.4.移除代码中无用的部分

使用Tree-shaking、代码分割、移除用不上的依赖项等。

4.5.对请求资源进行合理的拆分

(CSS、JavaScript脚本、图片/音频/视频等),减少请求资源的体积。

4.6.对资源进行压缩,减少传输数据的大小

4.7.使用HTTP/2、HTTP/3,提升资源请求速度(一般效果不是特别明显)

4.8.对请求进行优化

多个请求可以进行合并、减少通信次数;对请求进行域名拆分,提升并发请求数量。

五、耗时优化---首屏加载优化

请求资源返回后,浏览器会进行解析和加载,这个过程会影响页面的可见时间,通过对首屏加载的优化,可以有效的提升用户体验。

将页面内容尽快展示给用户,减少页面白屏时间,优化方案主要包括加载耗时优化+使用页面过渡效果。

5.1.加载耗时优化(性能和渲染耗时优化)

5.1.1.对页面进行分片/分屏加载,将页面可见/可交互时间提前。

5.1.2.优化资源加载的顺序和粒度,仅加载需要的资源,通过异步加载方法加载剩余资源

5.1.3.使用差异化服务,如,读写分离,对于不同场景按需加载所需要的模块。

5.1.4.使用服务器直出渲染(SSR),减少页面二次请求和渲染的耗时。

5.1.5.使用秒看技术,通过预览方式(如,图片)提前将页面内容提供给用户。

5.1.6.配合客户端进行资源预请求和预加载,如,使用预热Web容器。

5.1.7.配合客户端将资源和数据进行离线,可用于下一次页面的快速渲染。

5.2.使用页面过渡效果

使用页面过度效果可能更倾向于产品策略。很多时候,产品策略的调整给用户带来的体验优化效果不亚于技术手段优化。因此也需要重视。

常见的页面过渡效果方案,如下两种:

5.2.1.使用骨架屏进行预渲染

5.2.2.使用过渡动画让用户感知到页面正在顺利加载。

总结:从而避免用户对于白屏页面或者静止页面产生烦躁或者困惑。

六、耗时优化---渲染过程优化

用户在浏览器页面过程中,也会触发页面的二次运算和渲染,此时需要进行渲染过程的优化。

渲染过程优化,主要是减少用户的操作等待时间,避免出现卡顿或者卡死的情况。

6.1.使用资源预加载,在空间时间,提前将用户可能需要用到的资源进行获取并加载。

6.2.减少DOM数量,减少/合并DOM操作,减少浏览器渲染过程中的计算耗时。

6.3.通过合理利用浏览器的GPU合成,提升浏览器渲染效率。

6.4.使用离屏渲染,在页面不可见的地方提前进行渲染(如,Canvas渲染)。

6.5.通过将页面渲染帧率保持在60FPS左右,提升页面交互和渲染的流畅度。

除了上述5种方式以外,渲染过程同样可以使用页面过渡效果动画方式,例,在加载中,给到用户及时反馈,来提升用户的体验。

七、耗时优化---计算/逻辑运行提速

对于运算逻辑复杂、计算量较大的业务逻辑,需要进行计算/逻辑运行提速。

7.1.通过将JavaScript大任务进行拆解+并行计算的方式,有效的降低整体计算耗时,如,使用Web Worker。

7.2.通过使用运行效率更高的方式来减少计算耗时,如,使用Webassembly。

7.3.通过将计算过程提前,减少计算等待时长,如,使用AOT技术。

7.4.通过使用更优的算法或存储结构,提升计算效率,如,VSCode使用红黑树优化文本缓冲区的计算。

7.5.通过将计算结果缓存的方式,减少运算次数。

八、总结

1.在前端性能优化实践中,网络请求优化和首屏加载优化,使用频率最高,不管项目规模如何,各个模块和逻辑是否复杂,这两个方向的耗时优化,都是比较通用的。

2.相比之下,对于页面内容较多、交互逻辑、运算逻辑复杂的项目,才需要针对性的渲染过程优化和计算/逻辑运行提速。

posted on   pwindy  阅读(422)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
历史上的今天:
2021-08-30 在vue中使用swiper和vue-awesome-swiper
 
点击右上角即可分享
微信分享提示