如何优化 PWA 的加载速度？-JavaScript中文网-JavaScript教程资源分享门户

本题详细解读

1. 使用 Service Worker 缓存资源

Service Worker 是 PWA 的核心技术之一，它可以在后台拦截网络请求并缓存资源。通过预缓存关键资源，用户再次访问时可以直接从缓存中加载，减少网络请求时间。

// www.javascriptcn.com code example
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/index.html',
        '/styles/main.css',
        '/scripts/main.js',
        '/images/logo.png'
      ]);
    })
  );
});

2. 启用 HTTP/2

HTTP/2 支持多路复用，允许在同一个连接上并行传输多个请求和响应，减少了延迟。此外，服务器推送功能可以主动将资源推送给客户端，进一步提升加载速度。

3. 优化图片和媒体资源

图片通常是页面加载的主要瓶颈之一。可以通过以下方式优化：

使用 WebP 格式替代 PNG 或 JPEG，WebP 具有更高的压缩率。
使用工具（如 ImageOptim）压缩图片。
使用 loading="lazy" 延迟加载非关键图片。

<img src="image.webp" alt="Example" loading="lazy">

4. 代码分割和懒加载

将 JavaScript 代码分割成小块，按需加载。例如，使用 React 的 React.lazy 和 Suspense 实现懒加载：

// www.javascriptcn.com code example
const LazyComponent = React.lazy(() => import('./LazyComponent'));

function App() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </React.Suspense>
  );
}

5. 使用 CDN 加速

通过 CDN 分发静态资源，可以将资源缓存到离用户更近的服务器上，减少访问延迟。

6. 减少主线程工作

将计算密集型任务（如数据处理）移到 Web Worker 中，避免阻塞主线程，确保页面交互流畅。

const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (event) => {
  console.log('Result:', event.data);
};

7. 启用 Brotli 压缩

Brotli 是一种比 Gzip 更高效的压缩算法，可以进一步减小文件体积。大多数现代浏览器都支持 Brotli。

8. 优化 Web Fonts

使用 font-display: swap 避免字体加载阻塞渲染，或直接使用系统字体减少加载时间。

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

9. 预加载关键资源

通过 <link rel="preload"> 提前加载关键资源，确保它们在需要时已经可用。

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

10. 减少第三方脚本的影响

第三方脚本（如分析工具、广告脚本）可能会显著影响加载速度。可以通过以下方式优化：

延迟加载非关键脚本。
使用 iframe 隔离第三方脚本，避免阻塞主线程。

<script defer src="analytics.js"></script>

如何优化 PWA 的加载速度？

推荐答案