PWA 的性能优化有哪些方法？

推荐答案

1. 使用 Service Worker 缓存资源

   • 通过 Service Worker 缓存静态资源（如 HTML、CSS、JavaScript 和图片），减少网络请求，提升加载速度。
   • 使用 Cache API 实现离线访问功能。

2. 优化 Web App Manifest

   • 确保 manifest.json 文件配置合理，包括图标、主题颜色和启动 URL，以提升用户体验。
   • 使用 start_url 指定启动页面，避免加载不必要的资源。

3. 启用 HTTP/2 和 HTTPS

   • 使用 HTTP/2 提高资源加载效率，支持多路复用和头部压缩。
   • 确保网站使用 HTTPS，这是 PWA 的基本要求，同时提升安全性。

4. 代码分割与懒加载

   • 使用代码分割技术（如 Webpack 的 splitChunks）将代码拆分为多个小块，按需加载。
   • 对非关键资源（如图片、组件）使用懒加载，减少初始加载时间。

5. 优化图片和字体

   • 使用现代图片格式（如 WebP）并压缩图片大小。
   • 使用 font-display: swap 避免字体加载时的布局偏移。

6. 减少主线程负担

   • 将耗时任务（如数据处理）放入 Web Worker 中执行，避免阻塞主线程。
   • 使用 requestIdleCallback 处理低优先级任务。

7. 预加载关键资源

   • 使用 <link rel="preload"> 预加载关键资源（如字体、CSS、JavaScript），加速页面渲染。

8. 优化动画性能

   • 使用 requestAnimationFrame 实现流畅的动画效果。
   • 避免使用会触发重排和重绘的 CSS 属性（如 top、left），改用 transform 和 opacity。

9. 使用 IndexedDB 存储数据

   • 对于需要离线访问的应用，使用 IndexedDB 存储结构化数据，替代 localStorage。

10. 监控性能并持续优化

    • 使用 Lighthouse 或 Web Vitals 监控 PWA 性能，识别瓶颈并优化。

本题详细解读

1. Service Worker 缓存资源

Service Worker 是 PWA 的核心技术之一，它可以在后台运行并拦截网络请求。通过缓存静态资源，可以减少对服务器的依赖，提升加载速度。例如：

-- -------------------- ---- -------
-------------------------------- ------- -- -
  ----------------
    ------------------------------ -- -
      ------ --------------
        --------------
        --------------
        ---------
      ---
    --
  --
---

2. Web App Manifest 优化

manifest.json 文件定义了 PWA 的元数据，包括图标、主题颜色和启动 URL。合理的配置可以提升用户体验，例如：

-- -------------------- ---- -------
-
  ------- --- -----
  ------------- ------
  ------------ ----
  ---------- -------------
  ------------------- ----------
  -------------- ----------
  -------- -
    -
      ------ -------------------
      -------- ----------
      ------- -----------
    -
  -
-

3. HTTP/2 和 HTTPS

HTTP/2 通过多路复用和头部压缩提高了资源加载效率，而 HTTPS 是 PWA 的基本要求，确保数据传输的安全性。

4. 代码分割与懒加载

代码分割可以将应用拆分为多个小块，按需加载。例如，使用 Webpack 的 splitChunks：

optimization: {
  splitChunks: {
    chunks: 'all',
  },
}

懒加载可以通过动态导入实现：

import('module').then((module) => {
  module.default();
});

5. 图片和字体优化

使用 WebP 格式图片并压缩大小，同时通过 font-display: swap 避免字体加载时的布局偏移：

@font-face {
  font-family: 'MyFont';
  src: url('myfont.woff2') format('woff2');
  font-display: swap;
}

6. 减少主线程负担

将耗时任务放入 Web Worker 中执行，避免阻塞主线程：

const worker = new Worker('worker.js');
worker.postMessage(data);

7. 预加载关键资源

通过 <link rel="preload"> 预加载关键资源：

<link rel="preload" href="critical.css" as="style">

8. 优化动画性能

使用 requestAnimationFrame 实现流畅动画：

function animate() {
  // 动画逻辑
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

9. 使用 IndexedDB 存储数据

IndexedDB 适合存储结构化数据，例如：

const request = indexedDB.open('MyDatabase', 1);
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('store', 'readwrite');
  const store = transaction.objectStore('store');
  store.add(data);
};

10. 监控性能

使用 Lighthouse 或 Web Vitals 监控性能，识别瓶颈并优化：

lighthouse https://example.com