一见如故

• Lighthouse跑分：点加号（左上角） => 设备选桌面、类型选性能、设置（右上角）选用去缓存
• LCP(Largest Contentful Paint) 最大内容呈现到屏幕上的时间（多指图片、视频）
• FID(First Input Delay)首次输入延迟（取决于主线程被阻塞的总时长）
• CLS(Cumulative Layout Shift)累计布局偏移

其他指标

FCP(First Contentful Paint)
页面第一个内容元素被渲染到屏幕上的时长，反应一个白屏时长
TBT（Total Blocking Timing）
主线程被阻塞的总时长。浏览器会把js切片到50ms中去执行，超过这个时长页面是不可交互的，这样的任务叫做长任务。TBT为所有长任务超出时长的总和
TTI(Time to Interactive)
网页第一次达到可交互状态的时间点，此时浏览器可持续性的响应用户的输入，这个时间点多数情况是最后一个长任务完成的时间点
Speed Index
速度指数，指渲染的速度

performance使用

experience 指出不合理的地方
main 所有task及耗时
call tree 任务的包含关系及耗时

性能优化具体动作

上面哪些指标跑分不健康都可能因为如下原因：
网络、硬件、服务响应时间长、JS执行时间长、css渲染时间长

对于JS的处理：
避免使用复杂的js代码、减少DOM操作和重绘操作（修改dom的宽高等、增删dom、改变窗口大小、滚动页面）、懒加载异步加载js文件、压缩代码、web worker

对于CSS的处理：
避免使用复杂css选择器、使用css预处理器、压缩代码、多使用c3动画

对于资源响应时间长的处理：
使用HTTP2（可以同时发多个请求）、使用CDN、使用流浪器缓存、css sprites合并减少请求、对某些模块延迟加载、减少减小请求