返回

将页面加载性能优化到极致，提前规划：浅谈 preload

前端

preload 是一种声明式的资源请求指令，它可以在不阻塞浏览器的情况下提前加载资源。这个指令是为了提升性能，因为许多程序都需要对何时获取，处理和应用到文档的资源进行一个更粒度化的控制。

preload 的工作原理

preload 通过在 <head> 标签中添加一个 <link> 元素来工作。<link> 元素的 rel 属性设置为 "preload"，href 属性设置为要加载的资源的 URL。例如：

<link rel="preload" href="https://example.com/script.js">

浏览器在解析 HTML 文档时会遇到这个 <link> 元素，它会立即发出一个请求来加载指定的资源。然而，这个请求不会阻塞后续的 HTML 解析和渲染。这意味着浏览器可以继续解析和渲染 HTML 文档，而无需等待资源加载完成。

当资源加载完成后，浏览器会将其存储在缓存中。当页面需要使用该资源时，浏览器可以从缓存中快速检索它，而无需再次发出请求。这可以显著提高页面的加载性能。

preload 的兼容性

preload 在所有现代浏览器中都得到支持，包括 Chrome、Firefox、Safari、Edge 和 Opera。

如何使用 preload 来优化页面加载性能

您可以使用 preload 来加载各种类型的资源，包括 JavaScript 文件、CSS 文件、图像和字体。

以下是使用 preload 加载 JavaScript 文件的示例：

<link rel="preload" href="https://example.com/script.js" as="script">

以下是使用 preload 加载 CSS 文件的示例：

<link rel="preload" href="https://example.com/style.css" as="style">

以下是使用 preload 加载图像的示例：

<link rel="preload" href="https://example.com/image.png" as="image">

以下是使用 preload 加载字体的示例：

<link rel="preload" href="https://example.com/font.woff2" as="font">

在使用 preload 时，您需要注意以下几点：

  • 只能使用 preload 来加载跨域资源。
  • preload 不会阻止资源的加载。如果资源已经加载，则不会再次加载。
  • preload 可以与其他资源预加载技术一起使用，例如 DNS 预解析和 HTTP/2 推送。

preload 的最佳实践

以下是一些使用 preload 的最佳实践：

  • 仅预加载对页面性能至关重要的资源。
  • 避免预加载过多的资源，以免浪费带宽和服务器资源。
  • 使用 as 属性来指定资源的类型。这可以帮助浏览器更好地优化资源的加载。
  • 使用 media 属性来指定资源的媒体类型。这可以帮助浏览器仅在特定媒体类型的情况下加载资源。
  • 使用 onload 和 onerror 事件来处理资源加载的成功和失败。

结语

preload 是一种非常有用的技术，它可以帮助您显著提高页面的加载性能。如果您还没有使用 preload，那么我强烈建议您尝试一下。