1.定义

准确衡量⽹站的性能

根据 Google 认为以⽤户为中⼼的性能指标，应该能回答以下四个问题

是否发⽣？导航是否成功启动？服务器是否有响应？
是否有⽤？是否已渲染可以与⽤户互动的⾜够内容？
是否可⽤？⽤户可以与⻚⾯交互，还是⻚⾯仍在忙于加载？
是否令⼈愉快？交互是否顺畅⽽⾃然，没有滞后和卡顿

1.1是否发⽣

当⽤户访问⼀个⽹站的时候，关⼼的第⼀个问题永远是“是否发⽣”——浏览器是否成功地把我的请求发送出去，⽽服务器是否已经知道并开始处理我的请求。

TTFB (Time to First Byte)

⾸字节到达的时间点。

FP (First Paint)

⾸次绘制，标记浏览器渲染任何在视觉上不同于导航前屏幕内容的时间点。

FCP (First Contentful Paint)

⾸次内容绘制，标记浏览器渲染来⾃ DOM 第⼀位内容的时间点，内容可能是⽂本、图像等元素。测试加载速度的体验，⻚⾯最主要的内容何时呈现。

1.2 是否有⽤

当⽤户确定⾃⼰的请求发⽣了后，就会开始关⼼第⼆个问题：“是否有⽤？”

例如，⽤户在使⽤天⽓应⽤，在确定⻚⾯有反应了后，就开始关⼼，什么时候能展现有⽤的内容，从⽽

得知今天的天⽓。

LCP (Largest Contentful Paint)

最⼤内容绘制时间，计算从⻚⾯开始加载到⽤户与⻚⾯发⽣交互（点击，滚动）这段时间内，最⼤元素绘制的时间，该时间会随着⻚⾯渲染变化⽽变化，因为⻚⾯中的最⼤元素在渲染过程中可能会发⽣改变。

SI (Speed Index)

速度指标，填充⻚⾯内容的速度，取开始加载到最后完成渲染，每⼀时刻⻚⾯未完成度的积分。

1.3 是否可⽤

在⽤户得到了有⽤的信息后，⽤户就会基于得到的信息作出反应，这就是⻚⾯“是否可⽤？”例如看到了新闻后，想要评论。TTI、FID、TBT 就是回答这些问题的指标。

TTI (Time to Interactive)

可交互时间，⽤于标记⻚⾯已进⾏视觉渲染并能可靠响应⽤户输⼊的时间点。
⻚⾯可能会因为多种原因⽽⽆法响应⽤户输⼊，例如⻚⾯组件运⾏所需的 Javascript 尚未加载，或者耗时较⻓的任务阻塞主线程。
TTI 指标可识别⻚⾯初始 JavaScript 已加载且主线程处于空闲状态（没有耗时较⻓的任务）的时间点。

TBT (Total Blocking Time)

总共阻塞时间，计算的是从 FCP 到 TTI 之间，主线程阻塞的总时间。阻塞时间是指单次任务占⽤主线程超过 50 ms 的部分。

FID (First Input Delay)

⾸次输⼊延迟，指⽤户⾸次输⼊到⻚⾯响应的时间。我们都知道第⼀印象的重要性，⽹站亦是如此。⾸次输⼊延迟会成为⽤户对⽹站很重要的第⼀印象，决定⽤户有可能成为忠实⽤户或者弃之⽽去。值得注意的是，FID 仅关注⽤户离散的操作，如点击，轻击，按键等，其他交互如滚动和缩放，并不是 FID 关注的，因为通常浏览器会⽤⼀个单独的线程来处理它们。

1.4 是否令⼈愉快

使⽤是否流畅，有没有发⽣预料外的视觉偏移。

CLS (Cumulative Layout Shift)

累计布局偏移。测量在⻚⾯的整个⽣命周期中发⽣的每个意外的样式移动所造成的布局偏移分数的总和。测试视觉稳定性上的体验，有多少内容发⽣了意外的偏移。

比如：先加载了个中间的内容div在顶部，然后顶部的bar 加载出来后，会把内容div往下撑，撑多少就是CLS。

2.相关工具

2.1 谷歌开发工具performance

通过谷歌浏览器自带的开发工具下使用performance 分析生成报告

2.2 lighthouse

谷歌插件方式

通过浏览器扩展插件实现下载地址 gitee.com/mjsong/shar…

node方式

安装

npm install -g lighthouse

⽣成报告并在浏览器中打开

lighthouse http://kaikeba.com --view

报告格式是json，保存在当前⽬录

lighthouse http://kaikeba.com --output=json --output-path=./report.json

设置浏览器的窗⼝尺⼨

lighthouse http://kaikeba.com --chrome-flags="--window-size=1190,660"

模拟器设为桌⾯

lighthouse http://kaikeba.com --emulated-form-factor=desktop

常见指标

Perfermance 性能分析
Accessibility 可访问性
Best Practices 最佳实践
SEO 搜索引擎优化
Progressive Web App 是否集成pwa

2.3 自己开发

在对应的页面埋点，在数据渲染开始或请求/结束地方，通过接口后台统一收集，通过数据分析优势实时，真实，全面缺点：依赖多，成本高

2.4 第三方检测工具

阿里云 ARMS
NewRelic 优点：成熟，快速

缺点：成本高

前端性能分析