PHP小码农

Appearance

资源加载优先级 ​

浏览器根据资源的重要性自动分配加载优先级。了解浏览器资源优先级机制并使用 fetchpriority 属性进行微调，可以显著提升页面加载性能。本节将详细介绍浏览器资源优先级的分类、默认行为，以及如何通过 HTML 属性控制资源加载顺序。

前置知识

阅读本节前，建议先了解：关键渲染路径

浏览器资源优先级 ​

默认优先级分类 ​

优先级说明典型资源
Highest最高CSS、主文档（HTML）
High高首屏图片、关键字体
Medium中异步加载的图片、预加载资源
Low低预取（prefetch）资源
Auto自动默认的优先级

各资源类型的默认优先级 ​

资源类型默认优先级阻塞渲染？
<link rel="stylesheet">Highest是
<script>（同步）Highest是
<script defer>High否
<script async>Low否
<img>（首屏）High否
<img>（视口外）Low否
<img loading="lazy">Low否
<link rel="preload">High取决于 as
<link rel="prefetch">Low否

fetchpriority 属性 ​

fetchpriority 属性可以覆盖浏览器对资源加载优先级的自动判断。

语法 ​

html
<img src="hero.jpg" alt="首屏大图" fetchpriority="high" />
<img src="gallery-1.jpg" alt="图片" fetchpriority="low" loading="lazy" />

属性值 ​

值说明使用场景
high高优先级首屏图片、关键字体
low低优先级非首屏图片、延迟加载
auto自动（默认）浏览器自行判断

使用场景 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>资源优先级示例</title>
</head>
<body>
  <!-- 首屏 Hero 图片：高优先级 -->
  <img src="hero-banner.jpg" alt="首屏横幅" fetchpriority="high" />

  <!-- 非首屏内容图片：低优先级 + 懒加载 -->
  <img src="content-image-1.jpg" alt="内容图片" fetchpriority="low" loading="lazy" />
  <img src="content-image-2.jpg" alt="内容图片" fetchpriority="low" loading="lazy" />

  <!-- 背景装饰图片：低优先级 -->
  <img src="background-pattern.png" alt="" role="presentation" fetchpriority="low" loading="lazy" />
</body>
</html>

各元素的优先级控制 ​

img 标签 ​

html
<!-- 首屏关键图片：高优先级 -->
<img
  src="hero-image.jpg"
  alt="首屏图片"
  fetchpriority="high"
  width="1200"
  height="630"
/>

<!-- 首屏以下图片：低优先级 + 懒加载 -->
<img
  src="below-fold.jpg"
  alt="内容图片"
  fetchpriority="low"
  loading="lazy"
  width="800"
  height="600"
/>

<!-- LQIP（低质量占位图）先加载，高清图后加载 -->
<img src="hero-blur.jpg" alt="首屏图片" fetchpriority="high" />

script 标签 ​

html
<!-- 高优先级关键脚本 -->
<script src="critical.js" fetchpriority="high"></script>

<!-- 低优先级非关键脚本 -->
<script src="analytics.js" fetchpriority="low" defer></script>
html
<!-- 高优先级预加载关键字体 -->
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high" />

<!-- 低优先级预取下一页资源 -->
<link rel="prefetch" href="/next-page/data.json" fetchpriority="low" />

iframe 标签 ​

html
<!-- 高优先级：首屏嵌入的 iframe -->
<iframe src="embedded-widget.html" fetchpriority="high"></iframe>

<!-- 低优先级：非首屏的 iframe -->
<iframe src="comment-section.html" loading="lazy" fetchpriority="low"></iframe>

实战示例：首屏加载优化 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>资源加载优先级优化</title>

  <!-- 关键 CSS 内联 -->
  <style>
    body { margin: 0; font-family: sans-serif; }
    .hero { position: relative; height: 60vh; overflow: hidden; }
    .hero img { width: 100%; height: 100%; object-fit: cover; }
    .content { padding: 2rem; max-width: 800px; margin: 0 auto; }
  </style>

  <!-- 预加载关键字体 -->
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin fetchpriority="high">

  <!-- 预连接到 CDN 域名 -->
  <link rel="preconnect" href="https://cdn.example.com" fetchpriority="high">

  <!-- 非关键 CSS 异步加载 -->
  <link rel="preload" href="/styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'" fetchpriority="low">
</head>
<body>
  <header class="hero">
    <!-- 首屏大图：高优先级 -->
    <img
      src="https://cdn.example.com/images/hero-banner.jpg"
      alt="首页横幅"
      fetchpriority="high"
      width="1200"
      height="600"
    />
  </header>

  <main class="content">
    <h1>资源加载优化示例</h1>
    <p>首屏内容优先加载，非首屏内容延迟加载。</p>

    <!-- 非首屏图片：低优先级 + 懒加载 -->
    <img
      src="https://cdn.example.com/images/content-1.jpg"
      alt="内容图片"
      fetchpriority="low"
      loading="lazy"
      width="800"
      height="400"
    />
    <img
      src="https://cdn.example.com/images/content-2.jpg"
      alt="内容图片"
      fetchpriority="low"
      loading="lazy"
      width="800"
      height="400"
    />
  </main>

  <!-- 非关键脚本：低优先级 + defer -->
  <script defer fetchpriority="low" src="/scripts/analytics.js"></script>
  <script defer fetchpriority="low" src="/scripts/non-critical.js"></script>
</body>
</html>

注意事项 ​

  1. 不要滥用 fetchpriority="high"：过多高优先级资源会导致带宽竞争
  2. 配合 loading="lazy" 使用：非首屏图片使用低优先级+懒加载
  3. 设置 width 和 height：防止图片加载导致的布局偏移（CLS）
  4. 使用预加载提示：配合 preload/preconnect 提升关键资源加载速度

最佳实践 ​

  • 首屏关键图片设置 fetchpriority="high"
  • 非首屏图片设置 fetchpriority="low" + loading="lazy"
  • 非关键脚本设置 fetchpriority="low" + defer
  • 关键字体使用 preload + fetchpriority="high"
  • 为所有图片设置 width 和 height 防止 CLS
  • 使用 Chrome DevTools Network 面板检查资源优先级

下一节

继续学习：延迟与异步加载

参考链接 ​