本文共 1517 字，大约阅读时间需要 5 分钟。
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。
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
转载地址：http://fmven.baihongyu.com/