面试性能优化之性能指标，看看你的网站哪里需要优化呢！

在上一篇: 面试之如何进行性能优化里从输入URL后经历的各个步骤简述了各种优化手段。通过本篇你可以了解到以下问题：
如何分析性能问题？页面的关键性能指标有哪些？围绕性能指标可以采用哪些手段优化？
性能分析工具
除了第三方的性能分析工具，最方便常用的还是浏览器的开发者工具啦。
Network

Performance

Lighthouse

关键性能指标
一般性能主要关注：网络(TTFB)，渲染速度(DCL，L，FP，FCP，LCP)，响应性（FID），稳定性（CLS）

TTFB(Time To First Byte)：服务器接收请求后返回第一个字节的时间。Network窗口内可以清楚看到每个请求的Waterfall，鼠标放到进度条上会自动弹出各个阶段的时间：队列等待，建立连接，请求发送，TTFB，资源下载。
优化方案：减少DNS查询，浏览器缓存，CDN，文件压缩，合并请求，开启http2

DCL(DOMContentLoaded)：表示HTML加载完成事件，此时DOM树和CSS树都已准备完毕，若无js阻塞就可以开始构建渲染树。
L(onLoad)：表示页面所有资源加载完成事件。
FP(First Paint): 白屏时间，页面在导航后首次呈现出不同于导航前内容的时间点。
FCP(First Contentful Paint): 首屏时间，首次绘制任何文本，图像，非空白canvas或SVG的时间点。
LCP(Largest Contentful Paint): 页面的最大内容（通常是比较核心的内容）加载完成的时间，这个最大内容可以是图片/文本块。这个最大元素是浏览器自行计算的，Performance的Timing行内点击LCP可以在下面看到具体的元素。
以上指标和浏览器渲染流程相关，故可针对渲染所需的关键资源，渲染步骤如DOM解析，布局，绘制等进行优化。
优化方案：css放头部，js放底部，异步/延迟js，关键css/js内嵌，css规则/dom节点数避免嵌套过深，文件压缩，图片压缩，视口外图片懒加载，图像使用CDN。

FID(First Input Delay)：首次输入延迟。意味着用户首次和页面交互到客户端响应的时间。延迟代表主线程被其他任务阻塞。当然关于响应性方面也不能只关注第一次，如长列表滚动，动画等场景也是要考虑交互流畅度的。
优化方案：减小js和css文件大小，优化长任务，减少重流重绘，减少dom操作，合理使用css选择器，给元素创建单独图层(定位， will-change ，transform等)，节流防抖，事件委托。

CLS(Cumulative Layout Shift): 累积布局偏移 ，它用来测量整个页面生命周期内发生的所有意外布局偏移中最大一连串的布局偏移分数。主要衡量页面稳定性。
优化方案：给元素预设宽高

通过Lighthouse可以详细测试出网站的各个指标和相应分数，针对不同的指标还给出了优化的建议。

性能优化不是凭空去做，通过性能指标的具体数字可以明确网站的性能问题及优化效果，无论是工作中还是面试都建议从这个角度去应对。
如果您觉得文章还可请留下您的指印吧！欢迎评论留下您的建议！

参考文章：
浏览器渲染流程和性能优化【万字长文，超详细】
前端性能优化——关键渲染路径