你一定要知道的 Chrome DevTool 新功能
（点击上方公众号，可快速关注）
英文：Dor Moshe 译文：众成翻译/橙橙橙
http://zcfy.cc/article/3318
使用 Lighthouse 来提高网页质量
Chrome 开发团队一直致力于做一些功能和改进，可以让我们的浏览和开发体验变得更好。谷歌 I/O 2017 开发者大会在四月成功举办，期间 Google 向外界展示了很多重要的东西，其中一部分是有关 Chrome DevTool 的。对于使用 Chrome 进行开发的 Web 开发者们，这是非常值得关注的。Chrome 60 在 DevTool 中加入了很多新功能和变化。最令人惊喜的是全新的 Audits 面板。
新的 Audits 面板基于 Lighthouse , 它提供了一套全面的测试来评估网页的质量。测试的类别分别是 性能、可访问性、最佳实践和 PWA（Progressive Web Apps）。
在本文中，我们将研究一下 Audit 的功能，了解它测试的类别，在热门网站上实际应用一下这个功能，分析测试结果，最后简单说下 Lighthouse 的架构体系。
Chrome 60 之前的版本
Audits 面板在 DevTool 中已经存在了一些时间了。只不过在 Chrome 60 之前的版本中, 这个面板只包含网络使用率和页面性能两个测量类别。现在 Audits 面板已经被 Lighthouse 的集成版取代。
从外观和感觉上来看，新老版本的 Audit 面板的差异还是很明显的，所以谷歌把它当做一个全新的功能提了出来。在旧版本的 Chrome 中你需要安装扩展或者用 node 命令行工具才能使用Lighthouse，但在 Chrome 60 中它已经是一个内置的功能了。
Chrome 60之前的Audit功能
Lighthouse
Audits 面板基于谷歌开发的 Lighthouse，它提供了一整套的测试来评估网页的质量，并且是一个开源的项目。
Lighthouse 的目标是“Do Better Web” ，旨在帮助 Web 开发者改进他们现有的 Web 应用程序。通过运行一整套的测试，开发者可以发现新的 Web 平台 API，意识到性能的隐患，并学习（新的）最佳实践。换句话说，就是让开发者在 Web 开发上做得更好！DBW（Do Better Web） 作为一套独立的收集器和审查器与 Lighthouse 的核心测试同时运行。
想了解更多有关 Lighthouse 是如何工作的，你可以查看谷歌 I/O 2017 开发者大会上关于它的一段演讲：
这段演讲主要讲述了 Lighthouse 中都有哪些新功能，以及它是如何演变成现代 Web 开发的黄金搭档的。此外，还谈到了如何在不同环境（如，Node CLI，Chrome DevTools，WebPageTest和Headless Chrome）下使用 Lighthouse，它的架构，它与 GitHub /Travis/CI,Headless Chrome 的结合，以及如何在网站上运行自定义审查项来扩展 Lighthouse 的功能。
如何使用 Lighthouse
Audits 标签是 DevTool 内置选项卡的最后一个标签。想要使用它的话，需要安装 Chrome 60 的开发版或者 Canary 版。
你可以按照以下步骤来审查页面：
按 F12 来打开DevTool。
点击 Audits 标签
点击 Perform an audit
点击 Run audit。Lighthouse 会启动 DevTool 来模拟一个移动设备，在页面上运行一些测试，然后将结果显示在 Audit 面板中。
在执行审查之前，带有Lighthouse logo的Audits 面板。
面板
Lighthouse 从4个方面来分析页面： 性能、可访问性、最佳实践和 PWA。Lighthouse 会运行页面并执行一系列的测试，比如不同尺寸的设备和不同的网络速度。它还会检查页面的一致性，尽可能的去标准化，例如颜色对比度和 ARIA 最佳实践。
每个类别的审查报告
报告顶部的分数是每个类别的总分。其余部分是决定得分的每一个测试项的具体描述。每个类别的分析结果都会以适当的结构展示在指定的面板中。
PWA
PWA 是可靠，快速，引人入胜的，不过我们还可以做很多事情来提升 PWA 的体验，让它从中规中矩变的可圈可点。
为了帮助团队创造最好的体验，Lighthouse 整理了一份详细的清单，里面列举了想要创建一个标准 PWA 需要满足的条件，你也可以提供离线体验，让应用交互性能更快，还可以关注其他更多的重要细节来优化提升 PWA 。
PWA 结果 —失败的测试
当我们点击顶部的 PWA 圆圈时，我们首先看到的是失败的测试列表 。我们可以研究一下问题出来哪里，然后修复这些失败的测试用例。
PWA 测试报告的后面部分是通过的测试用例和需要手动检查的测试用例。为了验证某些测试结果，我们必须手动去运行查看。这些测试很重要，但不影响得分。
PWA 报告 — 通过的测试项和需要手动检查的部分
性能
Web 性能是指网页在浏览器上下载和渲染的速度。web 性能优化是提高 web 性能的一个技术领域。
事实证明，网站的速度能够影响访客的留存率、忠诚度和用户满意度，特别是对于网速较慢的用户和移动设备上的用户。
性能类别的第一部分是指标。这些指标从多个维度对应用程序的性能进行评估。
性能的指标
正如你所看到的，页面加载有包括3个重点：
首次有效绘制-衡量的是用户看到网页的主要内容所需的时间。
首次交互 - 指的是页面加载完成必要的脚本，并且 CPU 足以应对大多数用户输入时的所需的时间。
持续交互 -指的是页面中的大多数网络资源完成加载，并且 CPU 在很长一段时间都很空闲的所需的时间。
性能的下一个部分是可优化项。 例如你可以通过压缩资源图像和代码来让程序运行的更快，这些都是可优化的地方。
可优化项和诊断
最后一部分是诊断。这些诊断显示了有关性能的更多信息。其中一个就是关键请求链，它显示了页面首次渲染时所需的资源。我们可以通过减少请求链的长度、减少下载资源的大小或延迟下载不必要的资源来提高页面的加载速度。
可访问性
可访问性指的是那些可能超出“标准”用户范围之外的用户的体验，这类用户可能会以不同于你期望的方式访问你的网页或进行交互。具体点说，它代表的是身体经历过某种损伤或残疾的用户 - 记住，这种状况可能不是身体上的也可能是暂时的。
可访问性将测试屏幕阅读器的能力，以及其他可访问性是否能在页面中正常工作。例如：按元素来使用属性，ARIA属性的最佳实践，可辨别的元素命名等等。
可访问性类别报告
最佳实践
最佳实践类别会检查一些推荐做法，使页面现代化，并避免性能陷阱。例如：应用程序缓存，HTTPS 使用，不推荐使用的 API, 用户请求权限等等。这部分包含“失败和通过的测试用例”。
最佳实践类别报告
热门网站的评分
这一部分，我们将看到3个热门网站的最高分。首先是 Weather.com 的着陆页。第二个是 Google 的结果页。最后一个是 Facebook 的首页。
热门网站评分
我们可以看到，PWA 是得分最低的类别，也许是因为 PWA 是 Web 里的一个新领域。也可以看出，谷歌的性能是最好的，而 weather.com 的性能并不好（需要 25ms 才能进行持续交互）。所有被测试网站的可访问性都很好，得分都大于80。可访问性是一个得到了很大关注的领域，一些国家还将其列入了法律。
Lighthouse是如何工作的 - 架构
Lighthouse 的工作流程有几个主要的步骤。部分步骤发生在浏览器中，其余的步骤由Lighthouse 运行器执行。
Lighthouse 架构
下面是 Lighthouse 的组成部分：
驱动-和 Chrome Debugging Protocol 进行交互
收集器 -使用驱动程序收集网页信息。最小化后处理。收集器的输出结果被称为 Artifact。
审查器- 将 Artifact 作为输入，审查器会对其运行1个测试，然后分配通过/失败/得分的结果。
类别- 将审查的结果分组到面向用户的报告中（如最佳实践）。对该部分应用加权和总体然后得出评分。
结论
可访问性和 PWA 成为了现代 web 开发的主要衡量标准。很多公司投入时间和金钱来改善他们的网页。Lighthouse 在 DevTool 中的整合是可行的。它有助于 Web 开发人员变得更专业，还会提高网页的质量。我确信将来我们会在 Audits 标签中花很多时间，一些热门的网站上运行它，还会有更多的人也会这么做。
觉得本文对你有帮助？请分享给更多人
关注「前端大全」，提升前端技能