更快地构建 DOM: 使用预解析, async, defer 以及 preload

在现代 Web 应用程序中，DOM 构建速度变得越来越重要。当用户访问网站时，如果页面加载速度太慢，他们可能会感到不满意并离开该网站。为了优化网站的性能，我们可以使用一些技术来更快地构建 DOM。在本文中，我们将介绍四种实用的方法：预解析、async、defer 和 preload。

预解析

预解析是浏览器在解析 HTML 文件时对其中包含的外部资源（例如 JavaScript、CSS、图片等）进行预处理，从而提高后续请求这些资源时的速度。预解析有两种形式：

DNS 预解析

DNS 预解析是浏览器在解析 HTML 文件时查找链接中的域名，并提前解析 DNS 地址。这使得当需要请求该域名下的资源时，浏览器已经知道了该域名的 IP 地址，从而加快了请求的速度。

--------- -----
------
  ------
    ----- ----------------
    ---------- -------------
  -------
  ------
    -- ----------------------------------- ------- ------
    ------- ----------------------
  -------
-------

在上面的示例中，我们使用了一个链接和一个 JavaScript 脚本。如果我们希望浏览器对这些资源进行 DNS 预解析，只需将 <link> 和 <script> 标签的 rel 属性设置为 "dns-prefetch"：

--------- -----
------
  ------
    ----- ----------------
    ---------- -------------
    ----- ------------------ -------------------------
  -------
  ------
    -- ----------------------------------- ------- ------
    ------- ----------------------
  -------
-------

预连接

预连接是浏览器在解析 HTML 文件时查找链接，并提前建立连接。这使得当需要请求该链接时，浏览器已经建立了与服务器的连接，从而加速了请求的速度。

--------- -----
------
  ------
    ----- ----------------
    --------------------
  -------
  ------
    -- ----------------------------------- ------- ------
    ------- ----------------------
  -------
-------

在上面的示例中，我们使用了一个链接和一个 JavaScript 脚本。如果我们希望浏览器对这些资源进行预连接，只需将 <link> 和 <script> 标签的 rel 属性设置为 "preconnect"：

--------- -----
------
  ------
    ----- ----------------
    --------------------
    ----- ---------------- -------------------------------
  -------
  ------
    -- ----------------------------------- ------- ------
    ------- ----------------------
  -------
-------

async 和 defer

<script> 标签中的 async 和 defer 属性可以帮助我们更快地构建 DOM，因为它们可以让 JavaScript 脚本的下载和执行与页面渲染并行进行。这意味着当浏览器遇到 <script> 标签时，它不会暂停页面渲染，而是在后台异步加载脚本。两者的区别在于 JavaScript 的执行时间。

async

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/5728