defer, async 脚本

defer

明脚本在执行时不会影响页面的构造。也就是说,脚本会被延迟到整个页面都解析完毕后再运行。因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟按顺序执行

async

告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照它们的先后顺序执行

第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。

结论

  1. async是立即下载乱序执行

    async比较适用于百度分析或者谷歌分析这类不依赖其他脚本的库。

  2. defer是延迟顺序执行

    适用于脚本代码依赖于页面中的DOM元素(文档是否解析完毕)

    • 评论框

    • 代码语法高亮

从图中可以看到一个普通的<script>标签的加载和解析都是同步的,会阻塞DOM的渲染,这也就是我们经常会把<script>写在<body>底部的原因之一,为了防止加载资源而导致的长时间的白屏,另一个原因是js可能会进行DOM操作,所以要在DOM全部渲染完后再执行。

最后更新于