理解JavaScript的异步加载：defer与async-优快云博客

本文链接：https://blog.youkuaiyun.com/neoveee/article/details/80639100

本文探讨了JavaScript异步加载的重要性，特别是`defer`和`async`属性的差异。`defer`保证脚本按顺序执行，而`async`则可能导致脚本执行顺序不确定，但两者都能实现脚本加载与页面渲染的并行，提高用户体验。了解这些特性对于优化网页性能和加载速度至关重要。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

异步加载

what

two concept

js引擎:
渲染引擎:

why

性能优化
渲染时间

下面是一个再简单不过的页面：

index.js

alert(1232)

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src='./index.js'></script>
</head>
<body>
    <img src="http://www.jb51.net/images/logo.gif" alt="123">    
</body>
</html>

当浏览器渲染这个页面的时候，在解析到js脚本时候，弹出框会让js暂停执行，这时候页面是空白的，但是要主意的是，这时候页面已经加载完毕了，body中有一个img标签，在network我们可以看到，此时已经在请求这个图片资源(??)

为了在页面初始化时，提升页面渲染效果和用户体验，那些负责UI展现的脚本需要立即加载，其他的资源则按需或者稍后加载

how

把脚本放在页面body标签的尾部。这样，一方面用户可以更快地看到页面，另一方面脚本可以直接操作已经加载完成的dom元素。但这并不是最好的方案

理想情况下，脚本的加载应该与文档的加载同时进行，并且不影响DOM的渲染。这样，一旦文档就绪就可以运行脚本，

添加defer 或者async完成以上需求：

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

defer：
* 在DOM渲染的同时加载脚本文件，但是在文档就绪后再去执行，而且是按照文件的先后顺序依次执行
* 只有 Internet Explorer 支持 defer 属性。

async：
- 允许在下载脚本的同时进行DOM的渲染。但是它将在下载后尽快执行（即JS引擎空闲了立马执行)(操作 DOM 的脚本就不适合使用async)不能保证脚本会按顺序执行(这与defer不同)

如下的测试代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <img src="http://www.jb51.net/images/logo.gif" alt="123"> 
    <script src='./index.js' async></script>//console.log('index')       
    <script src='./index2.js' async></script>//console.log('index2')       
</body>
</html>

渲染以上页面，我们在控制台发现，index1和index2的打印顺序是随机，不确定的

Firefox 3.6、Opera 10.5、IE 9 和最新的Chrome 和 Safari 都支持 async 属性
仅仅适用于外部脚本(只有在使用src属性才有效)

可以同时使用 async 和 defer，这样IE 4之后的所有浏览器都支持异步加载

Conclusion

<script src="script.js"></script>
没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
<script async src="script.js"></script>
有 async，加载和渲染后续文档元素的过程将和 script.js 的加载并行进行（异步）。
<script defer src="myscript.js"></script>
有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），但是 script.js 的执行要在所有元素解析完成之后，DOMContentLoaded 事件触发之前完成。