这是我参与11月更文挑战的第4天，活动详情查看：2021最后一次更文挑战
本篇介绍 chrome 中的 Lighthouse 面板。Lighthouse 是一种开源的自动化工具，用于提高网页质量。你可以在任何网页上运行它。它能够针对性能、可访问性、渐进式 Web 应用等进行审核。你可以在 Chrome DevTools 中从命令行运行 Lighthouse，也可以作为 Node.js 模块运行。当你向 Lighthouse 提供了一个 URL 来进行审核时，它会针对该页面运行一系列审核，然后生成一个关于该页面执行情况的报告。这份报告可以作为如何改进页面的指标。每次审核都会产生一份参考文档，解释了这些审核为什么重要，以及如何解决等内容。
打开方式
跟打开 network 面板的方式一样。
生成报告
在右侧勾选后，点击 Generate report即可生产对应的性能分析报告。
- Categories
- Performance：How long does this app take to show content and become usable. 「性能」
- Progressive Web App：Does this page meet the standard of a Progressive Web App. 「渐进式web服务」
- Best practices：Does this page follow best practices for modern web development. 「最佳实践」
- Accessibility：Is this page usable by people with disabilities or impairments. 「易用性」
- SEO：Is this page optimized for search engine results ranking. 「搜索引擎优化」
- Device
- Mobile 『手机端』
- Desktop 『web端』
报告分析
整体评分
Performance
- First Contentful Paint： 首次内容绘制 (FCP) 是当浏览器从文件物件模型 (DOM) 渲染第一块内容，第一次提供页面正在载入的回馈给使用者。首次内容绘制时间戳记是当浏览器第一次渲染任何文字、图片（包含背景图片），以及非空白的 canvas 标记或 SVG 向量图片。排除任何 iframe 里的内容，但包含等待中的网络字体 (webfonts)。即使用者第一次开始使用页面内容。
- Speed index： 速度指数衡量页面性能的指标，代表页面内容渲染所消耗的时间，该值越低越好。
- Largest Contentful Paint： 最大内容绘制，表示网站渲染包含最多内容的元素所花费的时间。
- Time to interactive： 首次可交互时间。页面可以开始响应用户输入事件。（因为页面呈现过程中，其实还是不可交互的。）
- Total Blocking Time： 累计阻塞时长，首次渲染时间(FCP)和可互动时间(TTI)之间的这段时间内，用户无法和浏览器交互的时间。主线程通常被认为是“阻塞”的受害者。任何时候，假设有一个长任务（超过50毫秒的任务），那么主线程就会被阻塞掉。
- Cumulative Layout Shift： 累计布局偏移，指网页布局在加载期间的偏移量。得分范围是 0–1，其中 0 表示没有偏移，1 表示最大偏移。
Accessibility
Best Practice
SEO
综上所述，lighthouse 生成的报告是全英文的，需要大家有较强的英文能力才可以理解，每条展开后会有对应的界面截图以及优化建议，大家可以依据需求决定是否采纳。
最后说一句
如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。
