script标签的async属性是用来异步加载，异步加载的作用是否同时下载，执行html代码和js代码

Posted 2023-03-20

一般的script标签（不带async等属性）加载时会阻塞浏览器，也就是说，浏览器在下载或执行该js代码块时，后面的标签不会被解析，例如在head中添加一个script，但这个script下载时网络不稳定，很长时间没有下载完成对应的js文件，那么浏览器此时一直等待这个js文件下载，此时页面不会被渲染，用户看到的就是白屏（网页文件已下载好，但浏览器不解析）
而使用async属性，浏览器会下载js文件，同时继续对后面的内容进行渲染
通常如果js不需要改变DOM结构时可以使用async进行异步加载（比如一些统计代码可以异步加载，因为此代码与页面执行逻辑无关，不会改变DOM结构） 参考技术A 如果async="async"就是一部加载，异步加载的意思就是js相对于html异步的执行，也就是页面继续进行解析时，js将会被执行。换句话说就是js和html的执行顺序不会有绝对的先后顺序。

script标签中defer和async有什么不同？

对比

我们可以在网址中经常看到script标签出现async以及defer的属性

• defer：script被异步加载后并不会⽴刻执⾏，而是要等到整个页面在内存中正常渲染结束后，才会执行。多 个 defer 脚本会按照它们在页面出现的顺序加载。
• async：同样是异步加载脚本，区别是脚本加载完毕后⽴即执⾏，这导致async属性下的脚本是乱序的，对于script有先后依赖关系的情况，并不适⽤。

我们可以参考MDN上关于 ​​HTMLScriptElement​​​ 的描述：​​https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLScriptElement​​