一、性能优化指标
1.First Contentful Paint (FCP)
首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。
2.Largest Contentful Paint (LCP)
最大内容绘制 (LCP) 指标会根据页面首次开始加载的时间点来报告可视区域内可见的最大图像或文本块完成渲染的相对时间。
3.First Input Delay (FID)
FID 测量从用户第一次与页面交互（例如当他们单击链接、点按按钮或使用由 JavaScript 驱动的自定义控件）直到浏览器对交互作出响应，并实际能够开始处理事件处理程序所经过的时间。
4.Cumulative Layout Shift (CLS)
CLS 测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。
5.Total Blocking Time (TBT)
总阻塞时间 (TBT) 指标测量First Contentful Paint 首次内容绘制 (FCP)与Time to Interactive 可交互时间 (TTI)之间的总时间，这期间，主线程被阻塞的时间过长，无法作出输入响应。
6.Time to Interactive (TTI)
TTI 指标测量页面从开始加载到主要子资源完成渲染，并能够快速、可靠地响应用户输入所需的时间。
二、性能优化评估工具
1.Chrome DevTools
developer.chrome.com/docs/devtoo…
2.LightHouse
developers.google.com/web/tools/l…
3.PageSpeed Insights
developers.google.com/speed/docs/…
4.WebPageTest
www.webpagetest.org/?spm=a21iq3…
三、优化方案
1.压缩
- 代码压缩 github.com/mishoo/Ugli…
- 文本压缩 （gzip、Brotli、Zopfli）
- Tree-shaking
- Code-splitting
2.图片优化
- 小图优化 (css sprite、iconfont、da'taURL、svg)
- 图片格式选择
- 压缩 (tinypng)
3.加载策略
- 懒加载
- DNS预解析、预加载、预渲染
- 离线化 （ServiceWorker、Ap'pCache、l离线包）
- Http缓存 developer.mozilla.org/zh-CN/docs/…
- 数据缓存 （localStorage、sessionStorage） developer.mozilla.org/zh-CN/docs/…
- 资源加载 （顺序、位置、异步）developer.mozilla.org/zh-CN/docs/…
- 请求合并
- HTTP2
- CDN
- 服务端渲染
4.执行渲染
- CSS代码优化 （选择器、启用GPU、避免表达式）
- 使用requestAnimationFrame实现视觉变化
- 降低复杂度或者使用Web Worker
- 避免大型、复杂的布局和布局抖动
- 简化绘制复杂度、减少绘制区域
- 输入处理持续防抖
- 点击或滚动节流
5.感官体验优化
- 骨架屏
- Snapshot
- Loading
