携手创作，共同成长！这是我参与「掘金日新计划 · 8月更文挑战」的第2天，点击查看活动详情
前言
性能优化是一个前端工程师最重要的课题之一，这篇文章就浅显的说一下我对性能优化的理解。
三大核心指标
LCP,FID,CLS
LCP（最大内容绘制）：代表页面中最大的元素渲染时间（比如说图片）。通常在2.5s内用户是最好的体验。该指标在用户第一次交互操作后停止计算
FID（首次输入延迟）：计算用户第一次操作页面，页面做出响应的时间。通常在100ms内用户是最好的体验。
CLS（累积布局偏移）：在整个页面生命周期中，发生的布局偏移最大一连串的布局偏移分数。CLS 分数越低，代表页面的布局越稳定。
其它性能指标
FP（首次绘制）:页面首次绘制像素的时间。1.8秒内最佳
FCP（首次内容绘制）:浏览器在页面渲染第一帧内容DOM的时间。1.8秒内最佳
DCL（DOM 解析完成）:DOM解析完成的时间，不包括样式表，图片等
L（onload 事件触发）:整个页面完全加载完成的时间（DOM、样式表、脚本、图片）
TTI（首次可交互时间）:表示页面ui组件都可以交互，页面真正可用的时间
具体测量方式
1.Performance
2.Lighthouse
3.WebPageTest
4.web-vitals这个js库，可获取 CLS、FID、FCP、LCP、TTFB 指标
5.window.performance.timing
优化方案
1.cdn引入静态资源。
2.善用http缓存。
3.根据具体情况，尽量使用最新版本的库。
4.防抖节流优化高频事件。
5.预加载，preload/prefetch。控制 HTTP 优先级，使得关键请求更快响应。
6.tree shaking。
7.善用事件委托。
8.按需加载，动态导入一些文件。
9.webpack压缩资源体积（webpack-bundle-analyzer进行分析）。
10.Web Worker。
11.减少重绘回流操作。
