HTML的`defer`与`document.write`：在解析阶段对DOM树构建的影响与兼容性

大家好，今天我们来深入探讨两个在前端开发中经常遇到，但又容易混淆的概念：defer 属性和 document.write 方法，以及它们在HTML解析阶段对DOM树构建的影响，以及相关的兼容性问题。

一、HTML解析与DOM树构建

首先，我们需要理解浏览器是如何解析HTML并构建DOM树的。这个过程大致可以分为以下几个步骤：

接收HTML： 浏览器接收到服务器返回的HTML文档。
解析HTML： HTML解析器（通常是浏览器的核心引擎的一部分，如Blink或Gecko）读取HTML文档，将其分解为一个个的token（标签、属性、文本等）。
构建DOM树： 解析器根据token的顺序，逐步构建DOM树。每个HTML元素对应DOM树上的一个节点。
渲染树构建： 浏览器将DOM树和CSSOM（CSS Object Model）合并，构建渲染树，用于计算每个节点的位置和大小。
布局与绘制： 浏览器根据渲染树计算布局，并将页面绘制到屏幕上。

在这个过程中，JavaScript脚本的执行扮演着重要的角色。当HTML解析器遇到<script>标签时，会暂停解析，转而执行JavaScript代码。JavaScript代码可以访问和修改DOM树，从而影响页面的结构和内容。

二、`defer`属性：延迟执行脚本但不阻塞解析

defer 属性用于异步加载JavaScript文件，并延迟其执行。它的主要特点是：

异步下载： 脚本文件在后台异步下载，不会阻塞HTML解析。
延迟执行： 脚本文件在整个HTML文档解析完成后，但在DOMContentLoaded事件触发之前执行。
执行顺序： 如果有多个带有defer属性的脚本，它们会按照在HTML文档中出现的顺序依次执行。

defer 属性的语法如下：

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

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>defer Example</title>
</head>
<body>
    <h1>Hello, World!</h1>
    <div id="content"></div>

    <script src="script1.js" defer></script>
    <script src="script2.js" defer></script>

    <script>
        console.log("Inline script before DOMContentLoaded");
    </script>
</body>
</html>

script1.js:

console.log("script1.js executed");
document.getElementById("content").textContent = "Content added by script1.js";

script2.js:

console.log("script2.js executed");
document.getElementById("content").textContent += " and script2.js";

在这个例子中，script1.js 和 script2.js 都会异步下载，并在HTML文档解析完成后执行。执行顺序是先 script1.js 后 script2.js。内联脚本在异步脚本下载前被执行，但是会在 defer 脚本前输出 console.log 的信息。最终id="content"的 div 会显示 "Content added by script1.js and script2.js"。

defer属性对DOM树构建的影响：

defer 属性允许浏览器在下载JavaScript文件时不阻塞HTML解析，从而提高了页面的加载速度。脚本的执行被延迟到DOM树构建完成后，可以确保脚本能够访问到完整的DOM结构。

兼容性：

defer 属性在现代浏览器中得到了广泛支持，包括 Chrome, Firefox, Safari, Edge 和 Internet Explorer 9+。

三、`document.write`方法：动态修改文档流

document.write 方法用于在HTML文档流中写入内容。它的主要特点是：

同步执行： document.write 方法在HTML解析过程中同步执行。
修改文档流： document.write 方法会将内容直接插入到当前HTML解析的位置。
潜在的阻塞： 如果 document.write 方法在页面加载完成后执行，可能会导致页面重绘，影响用户体验。

document.write 方法的语法如下：

document.write("<h1>Hello, World!</h1>");

代码示例：

<!DOCTYPE html>
<html>
<head>
    <title>document.write Example</title>
</head>
<body>
    <h1>Original Content</h1>

    <script>
        document.write("<h2>Content added by document.write</h2>");
    </script>

    <p>More Original Content</p>
</body>
</html>

在这个例子中，document.write 方法会将 <h2>Content added by document.write</h2> 直接插入到 <h1>Original Content</h1> 和 <p>More Original Content</p> 之间。

document.write方法对DOM树构建的影响：

document.write 方法会直接修改HTML文档流，从而影响DOM树的构建过程。如果 document.write 方法在页面加载过程中执行，可能会导致浏览器重新解析HTML，重建DOM树，从而降低页面的加载速度。

兼容性：

document.write 方法在所有浏览器中都得到了支持。但是，由于其潜在的性能问题，不建议在生产环境中使用。特别是，当页面加载完成后调用 document.write，会导致浏览器清空整个文档并重新解析，这会严重影响用户体验。

document.write 的问题：

阻塞解析： document.write 是同步执行的，会阻塞HTML解析器，导致页面加载速度变慢。
页面重绘： 在页面加载完成后调用 document.write，会导致页面重绘，影响用户体验。
难以维护： document.write 会将内容直接插入到HTML文档流中，使得代码难以维护和调试。

四、`defer` vs. `document.write`：对比与选择

特性	`defer`	`document.write`
执行时机	HTML解析完成后，`DOMContentLoaded`事件触发前	同步执行，在HTML解析过程中
执行方式	异步下载，延迟执行	同步执行，直接修改文档流
阻塞解析	不阻塞HTML解析	阻塞HTML解析
影响DOM树构建	不直接影响DOM树构建，脚本在DOM树构建完成后执行	直接影响DOM树构建，可能会导致浏览器重新解析HTML，重建DOM树
兼容性	现代浏览器支持良好 (IE9+)	所有浏览器都支持
使用场景	加载不依赖DOM结构的脚本，例如统计代码，或者需要在DOM树构建完成后执行的脚本。	极少使用，除非有特殊需求，并且需要仔细考虑其潜在的性能问题。
最佳实践	推荐使用，可以提高页面加载速度。	尽量避免使用，可以使用其他方法来动态修改页面内容，例如`innerHTML`，`appendChild`等。

总结：

defer 属性是一种更现代、更高效的加载JavaScript文件的方式。它可以异步下载脚本，延迟执行，避免阻塞HTML解析，提高页面加载速度。document.write 方法虽然兼容性好，但其潜在的性能问题使得它在现代前端开发中很少使用。

五、深入理解 `document.write` 的行为

document.write 的行为在不同的场景下会有所不同，理解这些行为对于避免潜在的问题至关重要。

在页面加载过程中调用：

这是 document.write 最常见的用法。在这种情况下，document.write 会将内容直接插入到当前HTML解析的位置。
```
<!DOCTYPE html>
<html>
<head>
    <title>document.write Example</title>
</head>
<body>
    <h1>Original Content</h1>

    <script>
        document.write("<h2>Content added by document.write</h2>");
    </script>

    <p>More Original Content</p>
</body>
</html>
```
在这个例子中，<h2>Content added by document.write</h2> 会被插入到 <h1>Original Content</h1> 和 <p>More Original Content</p> 之间。

在页面加载完成后调用：

如果在页面加载完成后调用 document.write，浏览器会清空整个文档，并使用 document.write 写入的内容作为新的文档。这会导致页面重绘，用户体验非常差。

<!DOCTYPE html>
<html>
<head>
    <title>document.write Example</title>
</head>
<body>
    <h1>Original Content</h1>

    <button onclick="document.write('<h2>New Content</h2>')">Click Me</button>

    <p>More Original Content</p>

    <script>
        window.onload = function() {
            // 延迟一段时间后调用 document.write
            setTimeout(function() {
                //document.write("<h2>Content added by document.write after load</h2>"); // 避免使用
            }, 2000);
        };
    </script>
</body>
</html>

在这个例子中，如果点击按钮，会用 "

New Content

" 替换整个页面。注释掉 setTimeout 中的 document.write 以避免页面重绘。

在外部脚本中调用：

如果在外部脚本中调用 document.write，其行为与在内联脚本中调用类似。脚本会按照在HTML文档中出现的顺序执行，并将内容插入到当前HTML解析的位置。
```
<!DOCTYPE html>
<html>
<head>
    <title>document.write Example</title>
</head>
<body>
    <h1>Original Content</h1>

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

    <p>More Original Content</p>
</body>
</html>
```
script.js:
```
document.write("<h2>Content added by external script</h2>");
```
在这个例子中，<h2>Content added by external script</h2> 会被插入到 <h1>Original Content</h1> 和 <p>More Original Content</p> 之间。

六、替代 `document.write` 的方案

由于 document.write 存在诸多问题，现代前端开发中通常会使用其他方法来动态修改页面内容。以下是一些常见的替代方案：

innerHTML：

innerHTML 属性可以用来获取或设置HTML元素的HTML内容。它可以用来动态添加、修改或删除HTML元素。

<!DOCTYPE html>
<html>
<head>
    <title>innerHTML Example</title>
</head>
<body>
    <div id="content"></div>

    <script>
        document.getElementById("content").innerHTML = "<h2>Content added by innerHTML</h2>";
    </script>
</body>
</html>

在这个例子中，<h2>Content added by innerHTML</h2> 会被添加到 id="content" 的 div 元素中。

appendChild：

appendChild 方法可以用来将一个新的节点添加到指定元素的子节点列表的末尾。

<!DOCTYPE html>
<html>
<head>
    <title>appendChild Example</title>
</head>
<body>
    <div id="content"></div>

    <script>
        var h2 = document.createElement("h2");
        h2.textContent = "Content added by appendChild";
        document.getElementById("content").appendChild(h2);
    </script>
</body>
</html>

在这个例子中，一个新的 <h2> 元素会被添加到 id="content" 的 div 元素中。

DOM操作API：

浏览器提供了丰富的DOM操作API，可以用来动态创建、修改和删除HTML元素。这些API包括 createElement, createTextNode, setAttribute, removeChild 等。

<!DOCTYPE html>
<html>
<head>
    <title>DOM Manipulation Example</title>
</head>
<body>
    <div id="content"></div>

    <script>
        var h2 = document.createElement("h2");
        var text = document.createTextNode("Content added by DOM manipulation");
        h2.appendChild(text);
        document.getElementById("content").appendChild(h2);
    </script>
</body>
</html>

在这个例子中，一个新的 <h2> 元素和文本节点会被创建，并添加到 id="content" 的 div 元素中。

七、总结：避免阻塞，使用现代方法构建DOM

defer 属性提供了一种非阻塞的脚本加载方式，有利于提高页面加载速度和用户体验。而 document.write 方法由于其同步执行的特性，可能会导致性能问题，应尽量避免使用，并使用现代的DOM操作API作为替代方案。理解这些概念有助于编写更高效、更健壮的前端代码。