跳到主要内容

HTML 资源加载

介绍​

在构建网页时，HTML资源加载是一个关键的性能优化点。HTML文件是网页的基础，它定义了页面的结构和内容。然而，HTML文件中通常会引用其他资源，如CSS、JavaScript、图片等。这些资源的加载方式直接影响网页的加载速度和用户体验。

本文将逐步讲解HTML资源加载的基础知识，并提供优化技巧和实际案例，帮助你提升网页性能。

HTML 资源加载的基础知识​

1. HTML文件的结构​

一个典型的HTML文件结构如下：

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My Web Page</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="script.js" defer></script>
</head>
<body>
    <h1>Welcome to My Web Page</h1>
    <img src="image.jpg" alt="An example image" />
</body>
</html>

在这个例子中，HTML文件引用了三个外部资源：styles.css、script.js 和 image.jpg。这些资源的加载顺序和方式会影响页面的渲染速度。

2. 资源加载的顺序​

浏览器在解析HTML文件时，会按照从上到下的顺序加载资源。这意味着，如果某个资源加载时间较长，它可能会阻塞后续资源的加载，从而影响页面的渲染速度。

例如，如果 styles.css 文件较大，浏览器可能需要较长时间来加载它，这会导致页面在加载完成之前无法显示任何内容。

优化HTML资源加载的技巧​

1. 使用 defer 和 async 属性​

在加载JavaScript文件时，可以使用 defer 和 async 属性来控制脚本的加载和执行顺序。

  • defer: 脚本会在HTML文档解析完成后执行，但会在 DOMContentLoaded 事件之前执行。这可以确保脚本不会阻塞页面的渲染。

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

  • async: 脚本会在下载完成后立即执行，可能会阻塞页面的渲染。适用于不依赖于DOM的脚本。

    html
    <script src="script.js" async></script>

2. 预加载关键资源​

使用 <link rel="preload"> 可以提前加载关键资源，如CSS、字体或图片。这可以加快页面的渲染速度。

html
<link rel="preload" href="styles.css" as="style" />
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

3. 使用 loading="lazy" 延迟加载图片​

对于非关键图片，可以使用 loading="lazy" 属性来延迟加载图片，直到用户滚动到它们附近。

html
<img src="image.jpg" alt="An example image" loading="lazy" />

4. 压缩和合并资源​

压缩CSS、JavaScript和HTML文件可以减少文件大小，从而加快加载速度。此外，合并多个CSS或JavaScript文件可以减少HTTP请求的数量。

提示

使用工具如 Webpack 或 Gulp 可以自动压缩和合并资源。

实际案例​

案例1：优化电商网站的图片加载​

假设你正在开发一个电商网站，页面上有大量产品图片。为了提高页面加载速度，你可以使用以下优化技巧：

  1. 延迟加载图片: 使用 loading="lazy" 属性延迟加载非首屏图片。
  2. 预加载关键图片: 使用 <link rel="preload"> 预加载首屏图片。
  3. 压缩图片: 使用工具如 ImageOptim 压缩图片文件大小。
html
<link rel="preload" href="hero-image.jpg" as="image" />
<img src="hero-image.jpg" alt="Hero Image" />
<img src="product1.jpg" alt="Product 1" loading="lazy" />
<img src="product2.jpg" alt="Product 2" loading="lazy" />

案例2：优化博客网站的CSS和JavaScript加载​

假设你正在开发一个博客网站，页面上有多个CSS和JavaScript文件。为了提高页面加载速度，你可以使用以下优化技巧：

  1. 合并CSS和JavaScript文件: 将所有CSS文件合并为一个文件，所有JavaScript文件合并为一个文件。
  2. 使用 defer 属性: 确保JavaScript文件在HTML解析完成后执行。
html
<link rel="stylesheet" href="all-styles.css" />
<script src="all-scripts.js" defer></script>

总结​

优化HTML资源加载是提升网页性能的关键步骤。通过使用 defer 和 async 属性、预加载关键资源、延迟加载图片以及压缩和合并资源，你可以显著提高页面的加载速度和用户体验。

备注

附加资源:

警告

练习:

  1. 创建一个简单的HTML页面，并使用 defer 和 async 属性加载JavaScript文件，观察它们的执行顺序。
  2. 使用 <link rel="preload"> 预加载一个CSS文件，并测量页面加载时间的变化。
  3. 尝试压缩和合并多个CSS文件，并比较压缩前后的文件大小。