序言
在前端开发中，相信大家都有留意自己开发的网站或者App性能上的问题，这应该是大多数前端开发很在意的话题。当然所谓性能笼统的说也就是页面加载时间，数据响应时间，交互体验... 所以我们需要专业的测试网站而不是自己随便点点，当然市面上关于前端性能测试的网站或者工具都是基于PerformanceTiming和PerformanceEntry 进行定制的。
先看一些Chrome Performance常见名词解释
FP (First Paint)首次绘制
FP (First Paint) 首次绘制: 标记浏览器渲染任何在视觉上不同于导航前屏幕内容之内容的时间点.
FCP (First Contentful Paint)首次内容绘制
FCP (First Contentful Paint) 首次内容绘制 标记浏览器渲染来自 DOM 第一位内容的时间点，该内容可能是文
本、图像、SVG 甚至 元素.
LCP (Largest Contentful Paint) 最大内容渲染
LCP (Largest Contentful Paint) 最大内容渲染: 代表在viewport中最大的页面元素加载的时间. LCP的数据会
通过PerformanceEntry对象记录, 每次出现更大的内容渲染, 则会产生一个新的PerformanceEntry对象.(2019年11月新增)
DCL (DomContentloaded)
DCL (DomContentloaded): 当 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，无需等
待样式表、图像和子框架的完成加载.
FMP(First Meaningful Paint) 首次有效绘制
FMP(First Meaningful Paint) 首次有效绘制: 例如，在 YouTube 观看页面上，主视频就是主角元素. 看这个
csdn的网站不是很明显, 这几个都成一个时间线了, 截个weibo的看下. 下面的示例图可以看到, 微博的博文是主要元素.
Speed Index
首屏展现时间
TTI (Time to Interactive)
页面资源加载成功并能响应用户交互的时间点
TBT (Total Blocking Time)
FCP到TTI之间,主线程被long task(超过50ms)阻塞的时间之和
CLS (Cumulative Layout Shift)
累计布局偏移值
明白以上概念就可以看测试报告了
Lighthouse---本文的主角
- Lighthouse（灯塔）是由谷歌开发的开源web产品体验工具.
- 定义：Lighthouse分析web应用程序和web页面，收集关于开发人员最佳实践的现代性能指标和见解，让开发人员根据生成的评估页面，来进行网站优化和完善，提高用户体验。
- 测试报告截图介绍
- 以上报告从FCP,SI,LCP,TTI,TBT,CLS几个方面帮我们生成了测试报告，上面都有介绍，下面我们来说
Lighthouse如何使用
在chrome开发者工具中使用lighthouse
- 去chrome应用商店安装
- 接下来打开F12开发者工具我们可以看见它了，打开需要体检的网站，可以即时生成在线报告
在命令行上运行
通过Node CLI 运行可以指定明确的参数信息，可以同时输出多个格式的报告文件（默认是HTML），有比较大的灵活性。
- 全局下载
npm install -g lighthouse
yarn global add lighthouse
// 二选一
- 执行命令
lighthouse <网址>
- 报告生成，确保你的网址可以正常ping，如下是测试报告地址
到这你应该可以使用开发者工具或者命令行的方式帮你的网站体检了，快去试试吧
关于优化？
- 测试报告中会有相应的优化建议，可以根据他的建议进行性能优化，也许我们平时挂在嘴边的话在项目中就把它忘了，我们在项目中需要细心严谨，善于发现问题总结问题，加油吧~
FAQ
- Lighthouse开发团队在这里有一些常见问题解答，感兴趣的可以去看看~ FAQ 以上.
