前端性能优化总结

一、前端指标

FP，First Paint。
FCP，First Content Paint。
FMP，First Meaning Paint。
ATF，Above The Fold，首屏时间。
TTI，Time To Interact，首次交互时间，可以用DomReady时间。
资源总下载时间。Load时间 >= DomContentLoaded时间。
 - Dom加载完时间，DomContentLoaded。
 - 页面资源加载完时间，Load，包括图片，音视频等异步资源。但是资源加载完之后，页面还没有完全稳定，完全稳定的时间由finish决定。
服务端重要接口加载速度。
客户端启动容器（WebView）时间。优化方向前端性能优化分为两个方向，一是工程化方向，另一个是细节方向。这个概念来自于知乎Lucas HC。

二、工程化方向

客户端Gzip离线包，服务器资源Gzip压缩。
JS瘦身，Tree shaking，ES Module，动态Import，动态Polyfill。
图片加载优化，Webp，考虑兼容性，可以提前加载一张图片，嗅探是否支持Webp。
延迟加载不用长内容。通过打点，看某些弹窗内或者子内容是否要初始化加载。
服务端渲染，客户端预渲染。
CDN静态资源
Webpack Dll，通用优先打包抽离，利用浏览器缓存。
骨架图
数据预取，包括接口数据，和加载详情页图片。
Webpack本身提供的优化，Base64，资源压缩，Tree shaking，拆包chunk。
减少重定向。

三、细节方向

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

四、卡顿问题解决

CSS动画效率比JS高，css可以用GPU加速，3d加速。如果非要用JS动画，可以用requestAnimationFrame。
批量进行DOM操作，固定图片容器大小，避免屏幕抖动。
减少重绘重排。
节流和防抖。
减少临时大对象产生，利用对象缓存，主要是减少内存碎片。
异步操作，IntersectionObserver，PostMessage，RequestIdleCallback。

五、性能优化API

Performance。performance.now()与new Date()区别，它是高精度的，且是相对时间，相对于页面加载的那一刻。但是不一定适合单页面场景。
window.addEventListener("load", ""); window.addEventListener("domContentLoaded", "");
Img的onload事件，监听首屏内的图片是否加载完成，判断首屏事件。
RequestFrameAnmation 和 RequestIdleCallback。
IntersectionObserver、MutationObserver，PostMessage。6、Web Worker，耗时任务放在里面执行。

六、检测工具

Chrome Dev Tools
Page Speed3、Jspref

---

转载知乎-小米前端-成楠Peter