前端性能优化总结

偏执的太偏执、 2021-09-07 06:11 721阅读 0赞

## **前端指标** ##

1、FP，First Paint。

2、FCP，First Content Paint。

3、FMP，First Meaning Paint。

4、ATF，Above The Fold，首屏时间

5、TTI，Time To Interact，首次交互时间，可以用DomReady时间。

6、资源总下载时间。Load时间 >= DomContentLoaded时间

（1）Dom加载完时间，DomContentLoaded。

（2）页面资源加载完时间，Load，包括图片，音视频等异步资源。但是资源加载完之后，页面还没有完全稳定，完全稳定的时间由finish决定。

7、服务端重要接口加载速度。

8、客户端启动容器（WebView）时间。

## **优化方向** ##

前端性能优化分为两个方向，一是工程化方向，另一个是细节方向。这个概念来自于知乎Lucas HC。

**工程化方向**

1、客户端Gzip离线包，服务器资源Gzip压缩。

2、JS瘦身，Tree shaking，ES Module，动态Import，动态Polyfill。

3、图片加载优化，Webp，考虑兼容性，可以提前加载一张图片，嗅探是否支持Webp。

4、延迟加载不用长内容。通过打点，看某些弹窗内或者子内容是否要初始化加载。

6、服务端渲染，客户端预渲染。

7、CDN静态资源

8、Webpack Dll，通用优先打包抽离，利用浏览器缓存。

9、骨架图

10、数据预取，包括接口数据，和加载详情页图片。

11、Webpack本身提供的优化，Base64，资源压缩，Tree shaking，拆包chunk。

12、减少重定向。

**细节方向**

1、图片，图片占位，图片懒加载。 雪碧图

2、使用 prefetch / preload 预加载等新特性

3、服务器合理设置缓存策略

4、async（加载完当前js立即执行）/defer(所有资源加载完之后执行js)

5、减少Dom的操作，减少重排重绘

6、从客户端层面，首屏减少和客户端交互，合并接口请求。

7、数据缓存。

8、首页不加载不可视组件。

9、防止渲染抖动，控制时序。

10、减少组件层级。

11、优先使用Flex布局。

## **卡顿问题解决** ##

1、CSS动画效率比JS高，css可以用GPU加速，3d加速。如果非要用JS动画，可以用requestAnimationFrame。

2、批量进行DOM操作，固定图片容器大小，避免屏幕抖动。

3、减少重绘重排。

4、节流和防抖。

5、减少临时大对象产生，利用对象缓存，主要是减少内存碎片。

6、异步操作，IntersectionObserver，PostMessage，RequestIdleCallback。

## **性能优化API** ##

1、Performance。performance.now()与new Date()区别，它是高精度的，且是相对时间，相对于页面加载的那一刻。但是不一定适合单页面场景。

2、window.addEventListener("load", ""); window.addEventListener("domContentLoaded", "");

3、Img的onload事件，监听首屏内的图片是否加载完成，判断首屏事件。

4、RequestFrameAnmation 和 RequestIdleCallback。

5、IntersectionObserver、MutationObserver，PostMessage。

6、Web Worker，耗时任务放在里面执行。

## **检测工具** ##

1、Chrome Dev Tools

2、Page Speed

3、Jspref

发表评论取消回复

表情：

评论列表（有 0 条评论，721人围观）

还没有评论，来说两句吧...

相关阅读

相关前端性能优化总结

前言最近花了一些时间在项目的性能优化上，背后做了很多工作，但是最后依然没有达到自己想要的结果，有些失望，但是还是记录下自己的执着。性能优化总结：减少请求次数、减小资

怼烎@/ 2023年02月20日 05:00/ 0 赞/ 4 阅读

相关 web前端性能优化总结

1.减少http请求，合理设置http缓存 http协议是无状态的应用层协议，意味着每次http请求都需要建立通信链路、进行数据传输，而在服务器端，每个http都需要启动独

曾经终败给现在/ 2023年01月08日 08:28/ 0 赞/ 237 阅读

相关 web前端性能优化总结

网站的划分一般为二：前端和后台。我们可以理解成后台是用来实现网站的功能的，比如：实现用户注册，用户能够为文章发表评论等等。而前端呢？其实应该是属于功能的表现。并且影响用户访问体

ゞ浴缸里的玫瑰/ 2022年07月26日 09:02/ 0 赞/ 447 阅读

相关前端性能优化总结

前端性能优化的目的: 1. 从用户角度而言:优化能够让页面加载得更快、对用户的操作响应的更及时，能够给用户提供更为良好的体验。 2. 从服务商角度而言:优化能够减少页面

ゝ一世哀愁。/ 2022年07月14日 12:39/ 0 赞/ 405 阅读

相关 web前端性能优化总结

原文网址：http://www.2cto.com/kf/201604/498725.html 网站的划分一般为二：前端和后台。我们可以理解成后台是

灰太狼/ 2022年06月17日 19:57/ 0 赞/ 824 阅读

相关前端性能优化方法总结

前端性能优化（一）前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面

灰太狼/ 2022年05月24日 05:58/ 0 赞/ 414 阅读

相关 web前端性能优化总结

概括涉及到的分类网络层面构建层面浏览器渲染层面服务端层面涉及到的功能点资源的合并与压缩图片编解码原理和类

叁歲伎倆/ 2022年03月07日 02:56/ 0 赞/ 656 阅读

相关 web前端性能优化总结

为什么要进行前端性能优化影响用户访问体验的绝大部分来自前端页面，网站前端的用户体验决定了用户是否想要去使用网站的功能，而网站的功能决定了用户是否会一票否决前端体

ゝ一纸荒年。/ 2021年09月19日 00:22/ 0 赞/ 659 阅读

相关前端性能优化总结

从用户访问资源到资源完整的展现在用户面前的过程中，通过技术手段和优化策略，缩短每个步骤的处理时间从而提升整个资源的访问和呈现速度。网站的性能直接会影响到用户的数量，所有前端性能

逃离我推掉我的手/ 2021年09月14日 02:52/ 0 赞/ 655 阅读

相关前端性能优化总结

前端指标 1、FP，First Paint。 2、FCP，First Content Paint。 3、FMP，First Meaning Paint。 4、ATF

偏执的太偏执、/ 2021年09月07日 06:11/ 0 赞/ 722 阅读