2021前端性能优化总结【汇总】

关注公众号 前端人，回复“加群”

添加无广告优质学习群

前端指标

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. 延迟加载不用长内容。通过打点，看某些弹窗内或者子内容是否要初始化加载。
5. 服务端渲染，客户端预渲染。
6. CDN静态资源
7. Webpack Dll，通用优先打包抽离，利用浏览器缓存。
8. 骨架图
9. 数据预取，包括接口数据，和加载详情页图片。
10. Webpack本身提供的优化，Base64，资源压缩，Tree shaking，拆包chunk。
11. 减少重定向。

细节方向

1. 图片，图片占位，图片懒加载。雪碧图
2. 使用 prefetch / preload 预加载等新特性
3. 服务器合理设置缓存策略
4. async（加载完当前js立即执行）/defer(所有资源加载完之后执行js)
5. 减少Dom的操作，减少重排重绘
6. 从客户端层面，首屏减少和客户端交互，合并接口请求。
7. 数据缓存。8. 首页不加载不可视组件。
8. 防止渲染抖动，控制时序。
9. 减少组件层级。
10. 优先使用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