作为现代 Web 应用程序的一种新型技术，PWA（Progressive Web App）具有多种优点，例如更快的加载速度、更好的离线体验、可与操作系统集成等等。然而，在 PWA 开发中也会遇到一些性能问题，如何解决这些问题，让 PWA 更加高效、流畅呢？本文将深入探讨 PWA 开发中遇到的性能问题及解决方法。
一、外部资源加载
由于 PWA 单页应用程序的不同页面的内容都在同一 HTML 文件中，因此需要在加载页面时才能加载所有的资源，包括 JavaScript、CSS、图片等。这些可被缓存的资源可以通过 Service Workers 进行预存，以便离线访问和应用快速通道的使用。
1. JavaScript
JavaScript 是 PWA 中最重要的资源之一，因为许多 PWA 的组件是使用 JavaScript 编写的。在开发 PWA 时，我们可以使用如下技术来优化 JavaScript 的加载：
- 压缩代码：使用压缩工具（如 UglifyJS）可以减小 JavaScript 文件的大小，从而降低加载时间。
- 延迟加载：使用 defer 或 async 属性可以将脚本的加载推迟到页面渲染完成之后，提高页面响应速度。defer 脚本会在文档解析完成后执行，而 async 脚本不会阻塞页面解析过程，但也无法保证执行顺序。
- 代码分割：将大型 JavaScript 文件拆分成多个部分，只在需要时动态加载，这可以有效减小初始加载时间。Webpack、Rollup 等打包工具提供了如此功能。
2. CSS
CSS 文件也是 PWA 中重要的资源之一。在开发 PWA 时，我们可以使用如下技术来优化 CSS 的加载：
- 压缩代码：使用压缩工具（如 UglifyCSS）可以减小 CSS 文件的大小，从而降低加载时间。
- 延迟加载：与 JavaScript 类似，可以使用 defer 或 async 属性来推迟加载 CSS，以提高页面响应速度。
- 启用 HTTPS：倘若使用 HTTP，浏览器会将 CSS 文件与其他资源分开加载，导致额外的 HTTP 请求。HTTPS 可以帮助消除此问题。
3. 图片
PWA 中包含了大量的图片资源，这些资源占用了大量的空间和时间。在开发 PWA 时，我们可以使用如下技术来优化图片的加载：
- 压缩图片：使用像 ImageOptim、Kraken.io 这样的工具可以将图片大小降低至数百字节。压缩图片的同时会扩大图像带宽并削减图片质量，从而加快图片下载速度。
- 使用适当的格式：不同的图片格式适合不同的场合。例如，JPG 格式适合用于照片、PNG 应该用于设计师创作的图标和矢量图形。
- 使用响应式图片：为不同的设备尺寸生成图片。可以使用
<picture>或<img>元素配合srcset和sizes属性进行操作。 - 启用 HTTPS：倘若使用 HTTP，图片加载时间很长，因为浏览器需要为每个图片及其所关联的资源创建单个 HTTP 请求。
二、缓存
PWA 的离线功能是通过缓存机制实现的。Service Worker 可以将 PWA 特定 URL 中的资源预存储到用户设备上，以便于离线时也能够访问。缓存的资源会在下一次网络可用时更新，并且能够被更快速地加载。缓存可以通过以下方法进行优化：
1. 清理缓存
- 手动清理：我们可以通过手动清除浏览器缓存或使用开发者工具的“清除缓存”按钮来消除缓存。
- 过期时间：使用 Cache-control 标头或 max-age 指令来设置缓存时间，以便浏览器在时间到期时删除缓存。
2. 预缓存
Service Worker 可以将离线时需要的资源预缓存到用户设备，减少离线状态下加载页面的时间。预缓存需要谨慎而仔细地配置，确保仅缓存无需频繁更新的资源。可以使用插件（如 webpack-offline、sw-precache）等库来自动生成 Service Worker。
3. 从缓存中更新
Service Workers 可以使用网络更新先前缓存的资源。此方法可以保证您的 PWA 离线时的运行是 solide 的。要使用此功能，我们需要引入更新服务工作者的代码逻辑，当用户在线时，这段代码逻辑能够更新缓存。更新功能在 service worker 中可以如下实现：
-- -------------------- ---- -------
------------------------------ --------------- -
------------------
---------------------------
------------------------ -
-- ---------- -
-- -----------------------------
------ ---------
-
------ ---------------------
-
-
--
---三、性能
除了资源和缓存管理外，还有一些实际的优化点可帮助改善 PWA 的性能。
1. 去掉第三方脚本和插件
第三方脚本和插件可以严重影响网站性能。许多第三方庫会通过 CDN 方式引入，会消耗网络资源，例如 Font Awesome、Google Fonts。默认情况下，CDN 将文件分散到托管在不同地区的攻击服务器。
根据 Google 的建议，在 PWA 中慎用第三方库，仅仅依赖于公共标准格式的 CSS 和 JS 包，例如 jQuery 和 Bootstrap。
2. 优化渲染周期
当 PWA 组件被渲染时，会跨越多个渲染周期（Render Cycle），从而导致一定程度的延迟。以下技巧有助于减少渲染周期：
- 合并多个样式：通过将多个样式放在同一个样式块中，可以减少渲染周期数量。如果遇到大量样式和运行脚本的情况，建议将样式放在 head 中。
- 避免回流：当元素位置或尺寸发生变化时，会引起回流。在提高标准 CSS 中使用 transform 属性、过渡、动画，而非显式的对应尺寸变，从而减少回流的发生。
3. 优化 JavaScript 代码
JavaScript 是 Web 平台上处理计算密集型任务的主要原因。当 PWA 中的 JavaScript 代码没有被优化时，可能导致性能瓶颈。以下技巧可帮助优化 JavaScript 代码：
- 合并 JavaScript 文件：建议合并多个 JavaScript 文件以减少下载和解析时间。
- 使用操作 API：根据页面和应用程序的特定需求使用 requestAnimationFrame、setTimeout 和 setInterval 这样的操作 API，可以减少各种资源的使用情况。
- 使用 Web Worker：Web Worker 允许前端与主线程隔离子线程。对于计算密集型应用程序，Web Worker 可以明显提高性能。
四、总结
PWA 典型场景下应该包含大量的资源，因此可能出现被不小的加载时间和性能影响的问题。为了提供最优的用户体验，开发者需要优化自己的代码、资源加载和缓存。开发者还应该使用 Google 的 Lighthouse 工具，这样就可以根据暗示进行额外的性能优化。
优化 PWA 性能本身也是一个长期的任务，没有简单的解决方案。不过，减少资源和缓存的这些技术和质量的建议不仅有助于 PWA，而且适用于任何 Web 应用程序的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650121d095b1f8cacdef128b