在现代 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
