HTML 与 Web 性能优化：构建高速响应的现代网站

引言

随着互联网用户对网站加载速度期望的不断提高，前端性能优化已经成为现代 Web 开发的核心竞争力。据 Google 研究表明，页面加载时间每增加 1 秒，用户跳出率就会增加 32%。用户期望页面在 2 秒内完成加载，超过 3 秒的加载时间将导致近 40% 的用户放弃等待。

HTML 作为网站的骨架，其结构和优化策略对页面性能有着决定性影响。一个精心设计的 HTML 结构不仅可以加快首屏渲染速度，还能在资源有限的情况下优先展示最重要的内容，为用户提供即时反馈。本文将深入探讨如何通过优化 HTML 结构来提升页面性能，减少用户等待时间，提高整体用户体验。

这篇文章将探讨相关话题，希望本文对你有帮助。

浏览器渲染机制：理解性能优化的基础

在进行任何性能优化之前，深入理解浏览器如何解析和渲染页面至关重要。只有掌握了这一基础知识，我们才能有针对性地进行优化。

关键渲染路径解析

浏览器将 HTML 转化为可视页面需要经过以下步骤，这一系列步骤被称为"关键渲染路径"(Critical Rendering Path)：

1. 解析 HTML 生成 DOM 树：浏览器逐行解析 HTML 标记，构建文档对象模型(DOM)。DOM 是页面结构的内存表示，包含所有 HTML 元素及其关系。

2. 解析 CSS 生成 CSSOM 树：同时，浏览器解析外部 CSS 文件和样式元素，构建 CSS 对象模型(CSSOM)。这一过程会阻塞渲染，因为浏览器需要知道如何为元素设置样式。

3. 合并 DOM 与 CSSOM 形成渲染树：DOM 和 CSSOM 合并成一个渲染树(Render Tree)，其中只包含页面上可见的元素及其样式信息。隐藏的元素（如设置了 display: none 的元素）不会包含在渲染树中。

4. 布局计算（Layout/Reflow）：浏览器计算渲染树中每个元素的精确位置和大小，这一过程称为布局或回流。它决定了每个元素在视口中的准确位置。

5. 绘制（Paint）：布局完成后，浏览器将每个元素转换为屏幕上的实际像素，包括文本、颜色、边框、阴影等视觉属性。

6. 合成（Composite）：最后，浏览器将各个图层按照正确的顺序合成，形成最终的页面图像。

了解这一过程后，我们可以看到，任何影响这些步骤的因素都会影响页面的渲染速度。例如，外部 CSS 文件会阻塞渲染，因为浏览器必须等待 CSSOM 构建完成才能进行下一步。同样，脚本执行也可能阻塞渲染，特别是当脚本需要操作尚未加载的元素时。

以下是一个基本的 HTML 结构，我们将用它来理解影响渲染的因素：

  
  页面标题
  
  
  
  


  
    
    
网站标题
    
网站描述信息
  
  
  
  
    
      
文章标题
      
文章内容...
    
  
  
  
    
    
版权信息 © 2023
  

在上面的例子中，浏览器必须先下载并解析 styles.css 才能继续渲染过程，这就是为什么将关键 CSS 内联到 HTML 中可以加速首屏渲染 —— 它消除了额外的网络请求。同样，脚本默认会阻塞 HTML 解析，因为它们可能会修改 DOM 结构。

回流与重绘：性能瓶颈分析

回流(Reflow)和重绘(Repaint)是影响页面性能的两个关键因素，理解它们的区别和优化方法对提升页面性能至关重要。

回流（Reflow）：当 DOM 元素的几何属性（如大小、位置、边距）发生变化时，浏览器需要重新计算元素的位置和尺寸，这个过程称为回流。回流是一个计算密集型操作，会大量消耗 CPU 资源，特别是在复杂布局中。

回流会触发整个渲染树的重新布局，其成本随着页面复杂度增加而显著增长。当一个元素发生回流时，它的所有子元素和祖先元素也可能需要重新布局，这就是为什么回流被认为是性能杀手。

以下操作会触发回流：

• 添加或删除可见的 DOM 元素
• 元素位置、尺寸、内容的改变
• 页面初始化渲染
• 浏览器窗口大小变化
• 获取某些属性（如 offsetWidth、offsetHeight、scrollTop、clientWidth 等）

  // 以下代码将触发多次回流，因为每一行都在改变元素的几何属性
  const element = document.getElementById('example');
  element.style.width = '300px';       // 触发回流
  element.style.height = '200px';      // 再次触发回流
  element.style.marginTop = '20px';    // 又一次触发回流
  element.style.position = 'absolute'; // 再次触发回流
  // 以下代码也会触发回流，因为它们迫使浏览器计算最新的布局信息
  console.log(element.offsetWidth);    // 读取布局信息，触发回流
  console.log(element.offsetHeight);   // 再次触发回流
  

  重绘（Repaint）：当元素的外观（如颜色、背景、可见性等）发生变化，但不影响其布局时，浏览器会重新绘制元素，这个过程称为重绘。重绘的性能消耗比回流小，但在频繁触发时仍会影响性能。

  以下操作会触发重绘但不会触发回流：

  • 修改颜色、背景色、阴影等仅影响外观的属性
  • 修改元素的可见性（如 visibility: hidden，而非 display: none，后者会触发回流）

    // 以下代码只会触发重绘，因为这些改变不影响元素的布局
    element.style.color = 'red';             // 仅触发重绘
    element.style.backgroundColor = 'blue';  // 仅触发重绘
    element.style.boxShadow = '0 0 5px #000'; // 仅触发重绘
    

    优化策略：为了最小化回流和重绘对性能的影响，我们可以采取以下策略：

    1. 批量修改 DOM：一次性修改多个样式，而不是逐个修改

    // 不推荐：多次单独修改会触发多次回流或重绘
    element.style.width = '300px';
    element.style.height = '200px';
    element.style.border = '1px solid black';
    // 推荐：合并修改，只触发一次回流
    element.style.cssText = 'width: 300px; height: 200px; border: 1px solid black;';
    // 或使用 class 修改多个样式
    element.classList.add('new-layout');
    

    1. 使用文档片段：处理多个 DOM 操作时，先在内存中进行修改，再一次性应用到 DOM 树

    // 不推荐：直接在 DOM 中添加多个元素，每次添加都会触发回流
    const list = document.getElementById('list');
    for (let i = 0; i  
    避免强制同步布局：避免在修改 DOM 后立即读取布局信息
    // 不推荐：强制同步布局
    for (let i = 0; i  
    使用 CSS 硬件加速：利用 GPU 加速渲染，减轻 CPU 负担
    /* 启用 GPU 加速的 CSS 属性 */
    .accelerated {
      transform: translateZ(0); /* 或 translate3d(0,0,0) */
      will-change: transform; /* 提示浏览器该元素将来可能发生变化 */
    }
     
    通过理解回流和重绘的机制，并采取适当的优化策略，我们可以显著减少这些操作对页面性能的负面影响，提供更流畅的用户体验。
     
    HTML 结构优化策略
     
    HTML 结构的组织方式直接影响页面的加载和渲染速度。通过优化 HTML 结构，我们可以在不牺牲内容的情况下，显著提升页面的首屏加载速度。
     
    关键资源优先加载
     
    在 Web 性能优化中，"关键资源"指的是那些必须在首屏渲染前加载的资源，它们直接影响用户的初始体验。识别并优先加载这些资源是提升首屏性能的关键。
     
    内联关键 CSS
     
    传统方式下，浏览器需要先下载外部 CSS 文件才能渲染页面，这会导致首屏渲染延迟。通过内联首屏关键 CSS，我们可以消除这一网络请求，使浏览器能够立即开始渲染页面。
     
    "关键 CSS"是指渲染首屏内容所必需的最小 CSS 集合。通过工具分析（如 Critical CSS 或 PageSpeed Insights）或手动提取，我们可以确定页面首屏渲染所需的关键样式。
     
      
      
        /* 仅包含首屏渲染所需的关键样式 */
        body { margin: 0; font-family: 'Arial', sans-serif; }
        header { 
          background-color: #f8f9fa; 
          padding: 20px 0; 
          box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .hero-title { 
          font-size: 2rem; 
          font-weight: bold; 
          color: #333;
          margin-bottom: 1rem;
        }
        .hero-text {
          font-size: 1.1rem;
          color: #555;
          max-width: 600px;
          margin: 0 auto;
        }
        /* 其他首屏关键样式 */
      
      
      
      
      
    
     
    上面的代码展示了内联关键 CSS 的实现方式。我们将首屏渲染所需的样式直接嵌入到 HTML 中，而将其余样式以异步方式加载。这种方法的好处是：
     
    消除了阻塞渲染的外部 CSS 请求
    允许浏览器立即开始渲染首屏内容
    用户可以更快地看到有样式的内容，而不是白屏或无样式内容
    需要注意的是，内联 CSS 不会被浏览器缓存，因此对于返回访问者来说可能不如外部 CSS 文件高效。这就是为什么我们只内联关键 CSS，而将其余样式放在外部文件中。
     
    预加载与预连接策略
     
    现代浏览器提供了多种资源提示机制，允许开发者指导浏览器如何优先加载关键资源。这些机制包括预解析(dns-prefetch)、预连接(preconnect)、预加载(preload)和预获取(prefetch)。
     
    DNS 预解析(dns-prefetch)：
     
    DNS 解析是浏览器请求资源前必须完成的步骤，它将域名转换为 IP 地址。这个过程可能需要几十到几百毫秒。通过 DNS 预解析，浏览器可以在空闲时提前完成这一步骤，为后续资源请求节省时间。
     
    
     
    这对于页面需要从多个第三方域名加载资源的情况特别有用，如字体、图片、分析脚本等。预解析可以减少用户等待时间，因为当浏览器真正需要请求这些资源时，DNS 解析已经完成。
     
    预连接(preconnect)：
     
    预连接更进一步，它不仅完成 DNS 解析，还建立 TCP 连接，并在需要时完成 TLS 握手。这样，当浏览器需要从该域名请求资源时，可以立即开始传输数据，无需等待连接建立。
     
    
     
    预连接适用于你确定页面很快就会从该域名请求资源的情况。但不要滥用预连接，因为每个打开的连接都会消耗系统资源，过多的预连接反而会降低性能。
     
    预加载(preload)：
     
    预加载允许指定当前页面必需的关键资源，提示浏览器应尽快下载这些资源。与其他资源提示不同，预加载是强制性的，浏览器必须执行预加载请求。
     
    
    
    
    
    
     
    预加载的优势在于它可以改变资源的加载优先级，确保最重要的资源最先加载。例如，在一个内容丰富的新闻网站中，预加载主文章的配图可以显著改善用户体验，因为这些图片通常是用户关注的焦点。
     
    注意，预加载需要指定正确的 as 属性，以便浏览器设置正确的请求标头和优先级。而且，预加载的资源必须在页面中实际使用，否则会浪费用户的带宽。
     
    预获取(prefetch)：
     
    预获取与预加载不同，它是为未来的导航或用户操作预先获取资源，而非当前页面所需。预获取的优先级较低，浏览器会在空闲时下载这些资源。
     
    
    
     
    预获取适用于你能预测用户下一步操作的情况。例如，在分页列表中，预获取下一页的数据；或在电子商务网站中，预获取用户可能点击的产品详情页面资源。
     
    各种预加载指令的对比与应用场景：
     
    

    技术	用途	适用场景	具体实现方式
    dns-prefetch	提前解析域名	第三方资源较多
    preconnect	提前建立连接	需要尽快从特定域名加载资源
    preload	当前页面必需资源	关键字体、图片、CSS、JS
    prefetch	未来页面可能需要	下一页内容、可能点击的路径

    在实际应用中，这些技术通常结合使用。例如，对于重要的第三方资源，可以先使用 dns-prefetch 提前解析域名，然后使用 preconnect 建立连接，最后使用 preload 加载具体资源。这种组合策略可以最大限度地减少资源加载延迟。

    以字体加载为例，合理使用这些技术可以显著减少字体闪烁问题：

    延迟加载非关键资源

    并非页面上的所有资源都对首屏渲染至关重要。通过延迟加载非关键资源，我们可以减少初始页面负载，加快首屏渲染速度，提供更好的用户体验。

    脚本加载优化

    JavaScript 是现代网站不可或缺的组成部分，但它也是影响页面加载性能的主要因素之一。默认情况下，当浏览器遇到 标签时，它会停止 HTML 解析，下载并执行脚本，然后才继续解析。这会严重延迟页面渲染。

    HTML5 引入了 async 和 defer 属性，允许开发者控制脚本的加载和执行时机：

    普通脚本：阻塞 HTML 解析，立即下载并执行

    这种方式适用于页面渲染前必须执行的脚本，如关键功能或初始状态设置。但应尽量减少这类脚本的使用，因为它们会延迟整个页面的渲染。

    异步脚本(async)：不阻塞 HTML 解析，下载完成后立即执行

    async 脚本在下载时不会阻塞 HTML 解析，但会在下载完成后立即执行，可能会中断 HTML 解析。此外，async 脚本的执行顺序不确定，取决于下载完成的时间。这种方式适用于不依赖于页面其他部分且不被其他脚本依赖的独立脚本，如分析脚本、广告代码等。

    延迟脚本(defer)：不阻塞 HTML 解析，DOM 解析完成后按顺序执行

    defer 脚本在 HTML 解析时并行下载，但会等到 HTML 解析完成后、DOMContentLoaded 事件触发前按照它们在文档中出现的顺序执行。这种方式适用于需要操作 DOM 但不影响首屏渲染的脚本，如页面交互功能、评论系统等。

    在实际应用中，我们可以根据脚本的特性和重要性选择合适的加载方式：

      
      
      
      
      
      
      
      
      
      
      
      
        // 页面加载完成后再加载非关键脚本
        window.addEventListener('load', function() {
          const script = document.createElement('script');
          script.src = 'non-critical-feature.js';
          document.body.appendChild(script);
        });
      
    
    

    通过这种方式，我们可以确保关键功能快速可用，同时不让非关键脚本拖慢页面加载。

    脚本加载优化是一个平衡性能和功能的过程。对于每个脚本，我们都应该问自己：这个脚本对首屏渲染是否必要？它是否依赖于 DOM？其他脚本是否依赖它？基于这些问题，选择最适合的加载策略。

    图片懒加载实现

    图片通常是网页中最大的资源之一，占据了大量带宽。对于长页面或内容丰富的网站，一次性加载所有图片会严重影响初始加载性能。图片懒加载是一种只在需要时（通常是图片滚动到视口附近）才加载图片的技术，可以显著减少初始页面负载。

    原生懒加载属性：

    现代浏览器提供了原生的懒加载支持，通过简单的 loading="lazy" 属性即可实现：

    原生懒加载的优势在于简单易用，无需 JavaScript 支持，浏览器能够智能地决定何时加载图片。然而，它也有一些限制，如浏览器兼容性问题（较旧的浏览器不支持）以及无法精细控制加载时机。

    使用 Intersection Observer API：

    对于需要更精细控制或更广泛浏览器支持的场景，可以使用 Intersection Observer API 实现懒加载：

    // 使用 Intersection Observer 实现懒加载
    document.addEventListener("DOMContentLoaded", function() {
      // 选择所有带有 data-src 属性的图片
      const lazyImages = document.querySelectorAll("img[data-src]");
      
      // 创建观察者实例
      const imageObserver = new IntersectionObserver((entries, observer) => {
        entries.forEach(entry => {
          // 当图片进入视口
          if (entry.isIntersecting) {
            const img = entry.target;
            // 将 data-src 的值赋给 src 属性，触发图片加载
            img.src = img.dataset.src;
            // 加载后移除 data-src 属性
            img.removeAttribute("data-src");
            // 图片加载后停止观察
            imageObserver.unobserve(img);
          }
        });
      }, {
        // 配置根元素和阈值
        rootMargin: "0px 0px 200px 0px", // 提前 200px 加载图片，创造更平滑的体验
        threshold: 0.01 // 当图片有 1% 进入视口时触发加载
      });
      
      // 对每个懒加载图片启动观察
      lazyImages.forEach(img => imageObserver.observe(img));
    });
    

    Intersection Observer API 是一个强大的工具，它允许异步观察元素与其祖先元素或视口的交叉状态变化。与传统的滚动事件监听相比，它更高效，因为它不在主线程上运行，不会导致性能问题。此外，通过调整 rootMargin 参数，我们可以控制图片的预加载距离，创造更平滑的用户体验。

    传统滚动事件监听方法：

    对于需要支持更旧浏览器的场景，可以使用传统的滚动事件监听实现懒加载：

    // 传统滚动事件监听实现懒加载
    function lazyLoad() {
      const lazyImages = document.querySelectorAll('img[data-src]');
      const windowHeight = window.innerHeight;
      
      lazyImages.forEach(img => {
        const rect = img.getBoundingClientRect();
        // 当图片接近视口时加载
        if (rect.top 
          img.src = img.dataset.src;
          img.removeAttribute("data-src");
        }
      });
    }
    // 节流函数，限制滚动事件处理频率
    function throttle(func, limit) {
      let lastFunc;
      let lastRan;
      return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
          func.apply(context, args);
          lastRan = Date.now();
        } else {
          clearTimeout(lastFunc);
          lastFunc = setTimeout(function() {
            if ((Date.now() - lastRan) = limit) {
              func.apply(context, args);
              lastRan = Date.now();
            }
          }, limit - (Date.now() - lastRan));
        }
      }
    }
    // 添加滚动事件监听
    document.addEventListener('scroll', throttle(lazyLoad, 200));
    // 初始调用一次，加载初始视口中的图片
    document.addEventListener('DOMContentLoaded', lazyLoad);
    

    这种方法通过监听滚动事件并检查图片位置来实现懒加载。为了避免滚动事件的频繁触发导致性能问题，我们使用节流函数限制事件处理的频率。

    不同懒加载实现方法的效果对比：

    方法	优点	缺点	适用场景
    原生属性 loading=“lazy”	简单实现，浏览器原生支持，无需 JavaScript	浏览器兼容性有限，控制粒度较低	简单项目，现代浏览器用户群
    Intersection Observer	性能好，不阻塞主线程，配置灵活	需要 JavaScript 支持，老浏览器需要 polyfill	大多数现代网站
    传统滚动事件监听	兼容性好，几乎所有浏览器支持	频繁触发，性能较差，需要手动优化	需要支持旧浏览器的项目

    在实际项目中，图片懒加载的效果非常显著。

    除了常规图片，懒加载也适用于其他资源，如视频、iframe 和大型 JavaScript 库。例如，对于嵌入的视频播放器，可以先显示一个缩略图，当用户滚动到位置时再加载实际播放器：

    
      
      播放视频
    
    
      document.querySelectorAll('.play-button').forEach(button => {
        button.addEventListener('click', function() {
          const container = this.parentElement;
          const videoId = container.dataset.videoId;
          // 替换缩略图为实际视频播放器
          container.innerHTML = ``;
        });
      });
    
    

    图片懒加载是一种简单但非常有效的性能优化策略，它不仅可以提升页面加载速度，还可以节省带宽和减少不必要的资源消耗。根据项目需求和浏览器支持情况，选择合适的实现方法，可以在不影响用户体验的前提下显著提高性能。

    内容优先级渲染与骨架屏

    在页面加载过程中，用户体验很大程度上取决于内容呈现的速度和方式。通过优先渲染关键内容并使用骨架屏技术，我们可以显著改善用户体验和感知性能。

    内容优先级策略

    用户访问网页时最关心的通常是首屏内容。通过合理组织 HTML 结构，我们可以确保最重要的内容优先渲染：

      
      
        
    网站标题
        
          首页
          产品
          关于
        
      
      
      
        
        
          
    文章标题
          
    重要的首段内容...
          
          
          
    
            
    详细段落...
            
        
        
        
        
          
    相关文章
          
        
      
      
      
      
        
    版权信息 © 2023
        
    
          
        
      
      
      
      
    
    

    这种结构确保了浏览器首先解析和渲染用户最关心的内容。HTML 是流式解析的，浏览器会按照文档顺序处理内容，因此将关键内容放在前面可以加快首屏渲染。

    对于复杂的内容，我们可以使用客户端渲染与服务器端渲染相结合的方式，在服务器上渲染首屏关键内容，而将次要内容留给客户端处理：

    
      
      
    产品标题
      
    产品描述
      
    ¥299.00
    
    
    
      
    
    
      // 页面加载后获取并渲染非关键内容
      window.addEventListener('load', function() {
        fetch('/api/product/details')
          .then(response => response.json())
          .then(data => {
            document.getElementById('non-critical-content').innerHTML = `
              
                
    用户评价 (${data.reviews.length})
                

    ${data.reviews.map(review => `
    • ${review.text}
    `).join('')}

    相关商品

    `; }); });

    采用内容优先级策略的好处包括：

    1. 更快的首屏渲染时间：用户几乎立即能看到核心内容
    2. 更好的用户体验：提供即时反馈，减少用户等待感知
    3. 更高的用户留存率：研究表明，用户更愿意停留在快速加载的网站上

    骨架屏技术实现

    骨架屏是一种在内容加载过程中显示的低保真界面预览，它模拟了实际内容的布局结构，给用户一种页面已部分加载的印象，减少等待焦虑。

    基础骨架屏实现：

      /* 骨架屏基础样式 */
      .skeleton-container {
        padding: 15px;
      }
      
      .skeleton-line {
        height: 15px;
        margin-bottom: 10px;
        border-radius: 4px;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
      }
      
      .skeleton-line.short { width: 40%; }
      .skeleton-line.medium { width: 70%; }
      .skeleton-line.long { width: 100%; }
      
      .skeleton-image {
        width: 100%;
        height: 200px;
        border-radius: 8px;
        margin: 15px 0;
        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
        background-size: 200% 100%;
        animation: shimmer 1.5s infinite;
      }
      
      @keyframes shimmer {
        0% { background-position: -200% 0; }
        100% { background-position: 200% 0; }
      }
      
      /* 实际内容初始隐藏 */
      .content-container {
        opacity: 0;
        transition: opacity 0.3s ease;
      }
      
      .content-container.loaded {
        opacity: 1;
      }
    
    
      
      
    
        
    
        
    
        
    
        
    
        
    
        
    
        
    
      
      
      
      
    
        
    文章标题
        
    文章摘要内容...
        
    
          
    详细内容段落...
          
        
      
      
      
        // 模拟内容加载过程
        window.addEventListener('load', function() {
          // 模拟数据加载延迟
          setTimeout(() => {
            // 隐藏骨架屏
            document.getElementById('content-skeleton').style.display = 'none';
            // 显示实际内容
            const actualContent = document.getElementById('actual-content');
            actualContent.style.display = 'block';
            // 添加短暂延迟后添加 loaded 类，实现平滑过渡
            setTimeout(() => {
              actualContent.classList.add('loaded');
            }, 50);
          }, 1000); // 根据实际内容加载时间调整
        });
      
     
    组件化骨架屏：
     
    在实际项目中，我们通常会创建可复用的骨架屏组件，特别是在使用前端框架如 React、Vue 或 Angular 时：
     
    // React 骨架屏组件示例
    function SkeletonCard() {
      return (
        
    
          
    
          
    
          
    
          
    
        
      );
    }
    // 使用方式
    function ProductList({ isLoading, products }) {
      return (
        
    
          {isLoading ? (
            // 显示骨架屏
            Array(6).fill().map((_, index) => (
              `skeleton-${index}`} /
            ))
          ) : (
            // 显示实际内容
            products.map(product => (
              product.id} product={product} /
            ))
          )}
        
      );
    }
     
    自动生成骨架屏：
     
    对于复杂应用，手动创建骨架屏可能很繁琐。我们可以使用工具自动生成骨架屏，如 page-skeleton-webpack-plugin 或 react-content-loader：
     
    // 使用 react-content-loader 创建自定义骨架屏
    import ContentLoader from 'react-content-loader'
    const ProductSkeleton = () => (
      2}
        width={400}
        height={160}
        viewBox="0 0 400 160"
        backgroundColor="#f3f3f3"
        foregroundColor="#ecebeb"
      
        
        
        
        
        
        
      
    )
     
    骨架屏的好处不仅在于减少用户感知的加载时间，还在于提供了更流畅的体验过渡。研究表明，当用户看到进度指示或内容结构预览时，他们更能容忍实际加载时间，感知性能比实际性能更重要。
     
    高级优化策略
     
    随着 Web 技术的发展，浏览器提供了越来越多的高级优化功能，利用这些特性可以进一步提升页面性能。
     
    资源提示与预加载优化
     
    前面我们已经介绍了基本的资源提示，如 preload 和 prefetch。这里我们将深入探讨更多高级应用场景和组合策略。
     
    HTTP/2 服务器推送与资源提示结合
     
    HTTP/2 服务器推送允许服务器在客户端请求 HTML 时主动推送关键资源，无需等待浏览器解析 HTML 后再发起请求。结合资源提示，我们可以创建更高效的加载策略：
     
    
    
    
    
    
     
    服务器推送最适合用于推送关键 CSS 和 JavaScript，它们必须尽早加载以减少渲染阻塞时间。然而，过度使用服务器推送可能会浪费带宽，因为浏览器缓存中已有的资源也会被推送。
     
    为避免这个问题，可以使用 Cookie 记录客户端已缓存的资源：
     
    // 客户端记录已缓存资源
    document.addEventListener('DOMContentLoaded', () => {
      const cached = localStorage.getItem('cached-resources') || '';
      const resources = cached.split(',').filter(Boolean);
      // 添加新缓存的资源
      if (!resources.includes('critical.css')) {
        resources.push('critical.css');
      }
      localStorage.setItem('cached-resources', resources.join(','));
      // 设置 cookie 告知服务器
      document.cookie = `cached-resources=${resources.join(',')}; path=/; max-age=86400`;
    });