前端指标

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