技巧杂烩

script 标签的异步属性

前端JavaScript

script 标签的异步属性

通常我为了防止JS阻塞页面加载,会把script标签放在body标签末尾。

同步

同步模式:又称阻塞模式,会阻止浏览器的后续执行,停止后续解析,只有当前加载完成才能进行下一步操作。

异步

异步模式:async属性、defer属性。

<script async></script>
<script defer></script>
<!-- OR -->
<script async="true"></script>
<script defer="true"></script>

通过createElement创建的script标签其属性async默认为true

给创建的script标签添加defer属性:

var elm = document.createElement("script");
elm.defer = true;

defer与async的区别:defer要等到整个页面在内存中正常渲染结束(DOM结构完全生成,以及其他脚本执行完成),才会执行;async一旦下载完,渲染引擎就会中断渲染,执行这个脚本以后,再继续渲染。 defer是“渲染完再执行”,async是“下载完就执行”。 另外,如果有多个defer脚本,会按照它们在页面出现的顺序加载,并且多个async脚本是不能保证加载顺序的。

参考文献: script标签的同步和异步-CSDN

文章标题:script 标签的异步属性

文章作者:浅小沫

文章链接:https://blog.truimo.com/posts/script-async


您可以自由在任何媒介以任何形式分享本作品,但需署名,且不得用于商业目的或改编。若分发衍生作品,须采用相同的许可协议。

本博客的所有原创内容采用 CC BY-NC-ND 4.0 知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可。