JavaScript的defer与async属性应用详解
大量的网页中会引入JavaScript脚本,它通常比HTML的体积更大,更重一些,所以处理时间也更长。当浏览器加载 HTML 时遇到 <script>...</script>
标签,浏览器就不能继续构建 DOM,必须等待JavaScript脚本执行完毕。对于外部脚本 <script src="..."></script>
也是一样的:浏览器必须等脚本下载完,并执行结束,才能继续处理剩余的页面。
因此会导致两个重要的问题:
- 脚本不能访问到位于它们下面的 DOM 元素,脚本无法给它们添加处理程序等。
- 如果页面顶部有一个笨重的脚本,它会“阻塞页面”。在该脚本下载并执行结束前,用户不能看到页面内容。
通常的做法是将JavaScript脚本放置到网页的尾部,这样,它可以访问到它上面的元素,并且不会阻塞页面显示内容。但是这种解决方案远非完美。例如,浏览器只有在下载了完整的 HTML 文档之后才会注意到该脚本(并且可以开始下载它)。对于长的 HTML 文档来说,这样可能会造成明显的延迟。
这对于使用高速连接的人来说,这不值一提,他们不会感受到这种延迟。但是这个世界上仍然有很多地区的人们所使用的网络速度很慢,特别是一些地区的移动网络。
幸运的是,这里有defer
和 async
两个 <script>
特性可以为解决这个问题。
defer特性
defer
特性告诉浏览器不要等待脚本,浏览器将继续处理 HTML,构建 DOM。JavaScript脚本会“在后台”下载,然后等 DOM 构建完成后,脚本才会执行。
<!doctype html>
<body>
<p>...content before script...</p>
<script defer src="https://zhanzhangb.com/test.js"></script>
<!-- 以下内容立即可见 -->
<p>...defer应用实例...</p>
</body>
换句话说:
- 具有
defer
特性的脚本不会阻塞页面。 - 具有
defer
特性的脚本总是要等到 DOM 解析完毕,但在DOMContentLoaded
事件之前执行。
以下示例将解释第二句话的意思:
<p>...content before scripts...</p>
<script>
document.addEventListener('DOMContentLoaded', () => alert("DOM ready after defer!"));
</script>
<script defer src="https://zhanzhangb.com/test.js"></script>
<p>...脚本后的内容会立即显示...</p>
- 页面内容立即显示。
DOMContentLoaded
事件处理程序等待具有defer
特性的脚本执行完成。它仅在脚本下载且执行结束后才会被触发。
具有 defer
特性的脚本保持其相对顺序,就像常规脚本一样。
假设,我们有两个具有 defer
特性的脚本:test1.js
在前,test2.js
在后。
<script defer src="https://zhanzhangb.com/test1.js"></script>
<script defer src="https://zhanzhangb.com/test2.js"></script>
浏览器扫描页面寻找脚本,然后并行下载它们,以提高性能。因此,在上面的示例中,两个脚本是并行下载的。test2.js
可能会先下载完成。
但是,defer
特性除了告诉浏览器“不要阻塞页面”之外,还可以确保脚本执行的相对顺序。即使 test2.js
先加载完成,它也需要等到 test1.js
执行结束才会被执行。
当我们需要先加载 JavaScript 库,然后再加载依赖于它的脚本时,这可能会很有用。
注意:defer
特性仅适用于外部脚本。如果 <script>
脚本没有 src
,则会忽略 defer
特性,对于内联脚本是无效的。
async特性
async
特性与 defer
有些类似。它也能够让脚本不阻塞页面。但是,在行为上二者有着重要的区别。
async
特性意味着脚本是完全独立的:
- 浏览器不会因
async
脚本而阻塞(与defer
类似)。 - 其他脚本不会等待
async
脚本加载完成,同样,async
脚本也不会等待其他脚本。 DOMContentLoaded
和异步脚本不会彼此等待:DOMContentLoaded
可能会发生在异步脚本之前(如果异步脚本在页面完成后才加载完成)DOMContentLoaded
也可能发生在异步脚本之后(如果异步脚本很短,或者是从 HTTP 缓存中加载的)
换句话说,async
脚本会在后台加载,并在加载就绪时运行。DOM 和其他脚本不会等待它们,它们也不会等待其它的东西。async
脚本就是一个会在加载完成时执行的完全独立的脚本。
async不会按照脚本顺序执行,谁先加载完成,就先执行它。
当我们将独立的第三方脚本集成到页面时,此时采用异步加载方式是非常棒的:计数器,广告等,因为它们不依赖于我们的脚本,我们的脚本也不应该等待它们:
<!-- Google Analytics 脚本通常是这样嵌入页面的 -->
<script async src="https://google-analytics.com/analytics.js"></script>
总结
async
和 defer
有一个共同点:加载这样的脚本都不会阻塞页面的渲染。因此,用户可以立即阅读并了解页面内容。
但是,它们之间也存在一些本质的区别:
顺序 | DOMContentLoaded |
|
---|---|---|
async |
加载优先顺序。脚本在文档中的顺序不重要 —— 先加载完成的先执行 | 不相关。可能在文档加载完成前加载并执行完毕。如果脚本很小或者来自于缓存,同时文档足够长,就会发生这种情况。 |
defer |
文档顺序(它们在文档中的顺序) | 在文档加载和解析完成之后(如果需要,则会等待),即在 DOMContentLoaded 之前执行。 |
在实际开发中,defer
用于需要整个 DOM 的脚本,和/或脚本的相对执行顺序很重要的时候。
async
用于独立脚本,例如计数器或广告,这些脚本的相对执行顺序无关紧要。