性能优化-预加载

以下是常用的资源预加载手段及其实现方式，帮助提升网页加载速度和用户体验：

一、HTML 原生预加载

1. <link rel="preload">

• 用途：高优先级预加载关键资源（字体、首屏图片、关键CSS/JS）

• 示例：

  1 2 3 4 5

  <!-- 预加载字体 --> <link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin> <!-- 预加载关键脚本 --> <link rel="preload" href="main.js" as="script">

• 注意：

  • as 属性必须指定资源类型（如script, style, image）
  • 字体文件需加 crossorigin 属性

2. <link rel="dns-prefetch">

• 用途：提前解析外部域名的DNS
• 示例：

  1	<link rel="dns-prefetch" href="//cdn.example.com">

3. <link rel="preconnect">

• 用途：提前建立TCP连接（DNS + TCP握手 + TLS协商）
• 示例：

  1	<link rel="preconnect" href="https://api.example.com">

4. <link rel="prefetch">

• 用途：低优先级预加载后续页面可能需要的资源
• 示例：

  1 2	<!-- 预加载下一页内容 --> <link rel="prefetch" href="next-page.html" as="document">

5. <link rel="prerender">

• 用途：后台预渲染整个页面（Chrome已弃用，改用speculation-rules）
• 替代方案：

  1 2 3 4 5 6 7 8

  <script type="speculationrules"> { "prerender": [{ "source": "list", "urls": ["/next-page"] }] } </script>

二、JavaScript 动态预加载

1. 图片预加载

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// 创建Image对象
const img = new Image();
img.src = 'hero-image.jpg';

// 或使用Promise批量预加载
function preloadImages(urls) {
  return Promise.all(urls.map(url => 
    new Promise((resolve, reject) => {
      const img = new Image();
      img.onload = resolve;
      img.onerror = reject;
      img.src = url;
    })
  ));
}

2. 脚本/样式预加载

1
2
3
4
5
6

// 动态创建link标签
const link = document.createElement('link');
link.rel = 'preload';
link.as = 'script';
link.href = 'critical.js';
document.head.appendChild(link);

3. 数据预加载

1
2
3
4

// 使用Fetch API预取数据
fetch('/api/data', { priority: 'high' })
  .then(res => res.json())
  .then(data => window.cache = data);

三、HTTP/2 服务器推送

• 原理：服务器主动推送关键资源，无需等待客户端请求

• Nginx配置示例：

  1 2 3 4

  location / { http2_push /styles.css; http2_push /main.js; }

• 注意：需权衡推送资源必要性，避免浪费带宽

四、Service Worker 缓存预加载

1
2
3
4
5
6
7
8
9
10
11
12

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('precache-v1').then(cache => {
      return cache.addAll([
        '/styles.css',
        '/main.js',
        '/fallback-image.jpg'
      ]);
    })
  );
});

五、性能优化最佳实践

六、预加载策略验证工具

1. Chrome DevTools

   • Network面板：查看资源加载优先级（Priority列）
   • Lighthouse审计：检测未预加载的关键资源

2. WebPageTest

   • 可视化瀑布流分析各资源加载时序

注意事项

• 避免过度预加载：移动端需考虑流量消耗
• 优先级管理：关键资源用preload，非关键用prefetch
• 缓存策略：预加载资源应设置合适缓存头（如Cache-Control: max-age=3600）

通过组合使用这些预加载技术，可显著提升网页加载性能（LCP、FCP等核心指标）。建议优先优化首屏关键资源，再逐步扩展非关键资源的预加载。

• ← Previous Post
• Next Post →