返回

从 DOM 预解析、async/defer 到 Preload：如何加速 DOM 构建

前端

序言

在当今快节奏的数字世界中，网站的加载速度变得比以往任何时候都更加重要。用户期望网站能够在几秒钟内加载完成，如果网站加载速度过慢，他们很可能会选择离开并转到其他网站。

网站加载速度不仅会影响用户体验，还会影响网站在搜索引擎中的排名。谷歌等搜索引擎会将加载速度快的网站排名更高，因为它们可以为用户提供更好的体验。

因此，对于网站开发人员和管理员来说，优化网站的加载速度至关重要。在这篇文章中，我们将讨论一些可以加速 DOM 构建的技术，包括预解析、async/defer 和 Preload。

预解析

预解析是浏览器在正式解析 HTML 文档之前对 HTML 文档进行部分解析的过程。在这个过程中，浏览器会识别出 HTML 文档中的一些关键信息，例如 <link> 和 <script> 标签，并开始加载这些资源。

预解析可以帮助加快网页的加载速度，因为它允许浏览器在解析 HTML 文档的同时开始加载资源。这样一来，当浏览器解析完 HTML 文档并开始渲染网页时，这些资源就已经准备就绪了。

如何启用预解析

要启用预解析，您可以在 <head> 标签中添加以下代码：

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="example.com">

这将告诉浏览器在解析 HTML 文档时预解析 example.com 域名的 DNS 记录。

您也可以使用以下代码来预解析特定资源：

<link rel="prerender" href="example.com/image.jpg">

这将告诉浏览器在解析 HTML 文档时预加载 example.com/image.jpg 图像。

async 和 defer

async 和 defer 是两个可以用来优化 JavaScript 加载的属性。

async

async 属性告诉浏览器在加载 HTML 文档时异步加载 JavaScript 文件。这意味着浏览器不会等到 JavaScript 文件加载完成才开始渲染网页。

<script async src="example.com/script.js"></script>

defer

defer 属性告诉浏览器在解析完 HTML 文档之后再加载 JavaScript 文件。这意味着浏览器会等到解析完 HTML 文档并开始渲染网页之后再加载 JavaScript 文件。

<script defer src="example.com/script.js"></script>

async 和 defer 的区别

async 和 defer 的主要区别在于 async 属性允许 JavaScript 文件在加载过程中执行，而 defer 属性则要求 JavaScript 文件在加载完成后才执行。

对于不需要在网页加载过程中执行的 JavaScript 文件，可以使用 defer 属性。对于需要在网页加载过程中执行的 JavaScript 文件，可以使用 async 属性。

Preload

Preload 是一个可以用来预加载资源的属性。与预解析不同，Preload 会告诉浏览器在解析 HTML 文档之前就开始加载资源。

<link rel="preload" href="example.com/image.jpg" as="image">

这将告诉浏览器在解析 HTML 文档之前就开始加载 example.com/image.jpg 图像。

Preload 可以帮助加快网页的加载速度，因为它允许浏览器在解析 HTML 文档的同时开始加载资源。这样一来，当浏览器解析完 HTML 文档并开始渲染网页时，这些资源就已经准备就绪了。

总结

预解析、async/defer 和 Preload 是三种可以用来加速 DOM 构建的技术。这些技术可以帮助您提高网站的加载速度，改善用户体验，并提高网站在搜索引擎中的排名。

在使用这些技术时，您需要注意以下几点：

  • 预解析只能预解析有限数量的资源。
  • async 和 defer 属性只能用于加载 JavaScript 文件。
  • Preload 属性可以用于加载任何类型的资源。
  • 滥用这些技术可能会导致网站加载速度变慢。

因此，您应该谨慎使用这些技术，并根据您的实际情况选择最适合的技术。