什么是 PWA
PWA (Progressive Web App) 可以理解为渐进式 Web 应用，是一种基于 Web 技术实现的应用程序，通过使用 Manifest 文件、Service Worker 等特性，使得 Web 应用具有了 Native 应用的某些特性，例如离线缓存、消息推送、全屏体验等等。PWA 通过提供更好的用户体验，提高了应用的可用性和留存率，成为了目前互联网应用技术的一个重要方向。
PWA 的性能问题
与传统的 Web 应用相比，PWA 更需要关注性能问题。在网络不佳的情况下，PWA 中使用的 Service Worker 会带来额外的请求等问题，而离线缓存等功能也需要更高效的实现。所以在 PWA 应用开发中，性能监测工具尤为重要。
性能监测工具介绍
常见的性能监测工具有 Google 的 Lighthouse、WebPageTest 等等。下面我们主要介绍一下 Lighthouse。
Lighthouse
Lighthouse 是一款由 Google 开源的、用于改进网站质量的自动化工具。它可以通过 Chrome DevTools 或者 Node.js 运行，通过检查网页的性能、可访问性、最佳实践等多个评估类别，提供改进建议，让开发者更好地了解和优化自己的应用。特别的，Lighthouse 对于 PWA 应用的优化也有非常好的支持。
Lighthouse 的使用
- 在 Chrome 浏览器打开被评估的网页
- 打开 Chrome DevTools（可以使用快捷键 F12 或者 Ctrl+Shift+I）
- 点击 Lighthouse 标签页（部分较旧版本的 Chrome 浏览器，该标签页可能被隐藏到“更多工具”下）
- 点击“生成报告”按钮，等待 Lighthouse 完成分析
Lighthouse 报告解读
Lighthouse 报告一般包括 5 个类别的分析：Performance、Progressive Web App、Accessibility、Best Practices、SEO。以下以一个 React PWA 应用为例，其中包含若干个 Lighthouse 报告的截图，来解读 Lighthouse 的分析内容。
Performance 分析
Performance 分析主要是针对页面加载速度的分析，包括了时间轴分析和一些基础分析，例如优化图片等。如果可以将这个分数提高到 90 分以上，说明页面的性能已经非常不错了。
Progressive Web App 分析
Progressive Web App 分析是 Lighthouse 的重头戏，这里会对 PWA 应用的一些主要特性进行检查，例如 Service Worker/Caching、Manifest 文件等等。如果可以将这个分数提高到 90 分以上，说明这个 PWA 应用已经具备了比较优秀的体验。
Accessibility 分析
Accessibility 分析主要是针对应用的可访问性进行评估，评估标准是 WCAG 2.0。如果可以将这个分数提高到 90 分以上，说明应用的可访问性已经非常不错了。
Best Practices 分析
Best Practices 分析主要是针对应用的一些最佳实践进行评估，例如优化 CSS、JavaScript 等等。如果可以将这个分数提高到 90 分以上，说明这个应用代码非常优秀。
SEO 分析
SEO 分析主要是针对应用的搜索引擎优化进行评估，例如网页是否包含描述、关键字等 meta 标签。如果可以将这个分数提高到 90 分以上，说明应用需要开发者在 SEO 上进行一些更进一步的优化。
总结
通过 Lighthouse 等工具进行性能监测对于 PWA 应用而言尤为重要，它可以帮助我们及时发现 PWA 应用中存在的性能瓶颈，并给出具体的解决方案，将 PWA 应用的性能做到最优。通过不断理解和使用性能监测工具，我们可以更好地提升自己的技术能力和开发水平。
示例代码
-- ------- ------ ------
-------------------------------- ----- -- -
----------------
------------------------------------------ -- -
------ --------------
--------------------
----------------------
-----------------------
-- -----------
---
--
--
---
-- ------- ------ --------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
-- ---------- -
------ ---------
-
----- ------------ - ----------------------
------ --------------------------------- -- -
-- ---------- -- --------------- --- --- -- ------------- --- -------- -
------ ---------
-
----- --------------- - -----------------
------------------------------------------ -- -
------------------------ -----------------
---
------ ---------
---
--
--
---来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6472a97f968c7c53b00481c5