关于Javascript中defer和async的区别总结

关于JavaScript中的defer和async属性的深入理解

对于熟悉《JavaScript高级程序设计》的读者来说，可能对于其中的defer和async有所了解，但可能觉得其解释较为浅显。今天，我们将通过这篇文章来深入defer和async的区别。

我们先了解基本的HTML脚本加载方式。在HTML中，如果没有使用defer或async属性，浏览器会立即加载并执行指定的脚本。这意味着，在渲染该script标签之下的文档元素之前，浏览器会优先加载并执行脚本。

当我们为script标签添加async属性时，加载和渲染后续文档元素的过程将与script.js的加载与执行并行进行。这意味着脚本的加载和执行是异步的，不会阻塞页面的渲染。

而当我们为script标签添加defer属性时，加载后续文档元素的过程将与script.js的加载并行进行，但script.js的执行要在所有元素完成之后，DOMContentLoaded事件触发之前完成。这意味着脚本会在页面完全加载后执行，但仍然保持异步加载的优势。

在实际应用中，为了避免页面渲染的延迟，许多Web应用程序会选择将所有JavaScript引用放在body元素的后面。这样做可以确保在包含的JavaScript代码之前，页面的内容已经完全呈现在浏览器中。

接下来，我们深入一下defer属性。Defer属性只适用于外部脚本文件。如果为script标签定义了defer属性，那么这个脚本会在整个页面都完毕后再运行，不会影响页面的构造。这意味着脚本会立即下载，但会延迟执行。

举个例子，即使我们把包含defer属性的script元素放在了文档的head元素中，其中的脚本也会延迟到浏览器遇到/html标签后再执行。这种机制使得页面能够更快地呈现给用户，提高了用户体验。

HTML5规范明确规定了脚本的执行顺序。理论上，延迟脚本会按照出现的先后顺序执行，第一个延迟脚本会在第二个之前运行，并且这两个脚本都会在DOMContentLoaded事件之前执行。这个事件是在DOM树构建完成后触发的，它不需要等待所有的资源都加载完毕。

在实际应用中，延迟脚本的执行并不总是按照顺序，也不总是在DOMContentLoaded事件之前。建议只使用一个延迟脚本以确保其执行顺序。当使用defer属性时，浏览器会并行下载脚本和其他页面元素，但脚本的执行会延迟到所有元素完成之后，且在DOMContentLoaded事件触发之前。

在实际操作中，把所有脚本都放在HTML文档的底部是最佳实践。这样做可以确保非脚本的其他元素能够尽快加载和，尤其对于旧浏览器来说这是唯一的优化选择。需要注意的是defer属性在浏览器间的表现并不一致。为了规避这种差异，可以采用“懒加载”的方法，即只有在需要时才加载脚本。

还有一种方式是使用async（异步脚本）属性。这种属性适用于外部脚本文件，它会告诉浏览器立即下载文件。但与defer不同的是，标记为async的脚本并不保证按照指定顺序执行。在一个简单的HTML页面中，如果两个脚本都使用了async属性，那么它们的执行顺序可能会被打乱。

为了确保页面内容的异步加载，可以使用以下代码来添加异步脚本：

```javascript

function lazyload() {

var elem = document.createElement("script");

elem.type = "text/javascript";

elem.async = true;

elem.src = "script.js";

document.body.appendChild(elem);

}

if (window.addEventListener) {

window.addEventListener("load", lazyload, false);

} else if (window.attachEvent) {

window.attachEvent("onload", lazyload);

} else {

window.onload = lazyload;

}

```

通过图解可以更清晰地理解这个过程：网络读取（脚本下载）与HTML是异步的，而defer和async的差别在于脚本下载完成后的执行时间。defer是立即下载但延迟执行，而async则是立即下载并执行。对于应用脚本的加载和执行要求，defer可能更贴近实际需求。而async虽然能加速脚本的下载，但可能会打乱页面的渲染流程。建议在使用异步脚本时，避免在加载期间修改DOM。 JavaScript 中的 defer 和 async：理解脚本加载与执行的差异

在 Web 开发中，我们经常会遇到需要异步加载 JavaScript 脚本的情况，这时，我们就会用到 HTML 中的 defer 和 async 属性。这两个属性都能够帮助我们实现脚本的异步加载，但它们的工作方式却有所不同。下面，我们就来详细一下这两者的区别。

关于 defer。当我们为脚本标签添加 defer 属性时，浏览器会保证按照脚本的加载顺序来执行它们。这意味着，如果有多个脚本都设置了 defer 属性，那么浏览器会按照它们在 HTML 中出现的顺序依次执行。这种属性的优点是，它尊重脚本的加载顺序，能够确保某些依赖特定执行顺序的脚本能够正确运行。defer 脚本会在文档完全加载并完成之后才会执行，这就意味着它们无法直接访问 DOM。如果你的脚本需要在 DOM 完全加载后立即执行，那么可能需要考虑其他方法。

然后，我们来看看 async 属性。与 defer 不同，标记为 async 的脚本并不保证按照它们在 HTML 中指定的顺序执行。当浏览器加载完一个 async 脚本后，它会立即执行该脚本，而不管其他脚本的加载状态。这种属性的优点是，它可以显著提高页面的渲染速度，因为浏览器可以在下载脚本的同时渲染页面。由于 async 脚本的执行顺序是不确定的，所以如果你的脚本之间存在依赖关系，那么使用 async 可能会导致问题。由于 async 脚本会在 DOM 过程中就开始执行，所以它们可以访问 DOM 并与之交互。

async 对于那些不依赖其他脚本或不被其他脚本依赖的脚本来说是非常合适的。对于那些需要按照特定顺序执行的脚本（如应用脚本），则应该使用 defer。具体的选择还需要根据具体的应用场景和需求来决定。希望这篇文章能帮助大家更好地理解 JavaScript 中的 defer 和 async 属性，如果有任何疑问或需要进一步的交流，欢迎留言交流。