我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

在上一篇文章中,苏南大叔描述了网页使用script标签的defer属性的问题,defer的作用是把一些脚本延迟到最后再执行。这对于网页元素加载来说,就是异步加载了。但是,script标签还有另外一个async属性,这个async属性可是货真价实的“异步加载”的意思。那么,这个属性又怎么使用呢?和defer属性,又有什么区别呢?这些就是本文要讨论的问题。

苏南大叔:网页控制script脚本异步执行方案,async和defer属性异同 - script-async属性
网页控制script脚本异步执行方案,async和defer属性异同(图3-1)

大家好,这里是苏南大叔的“程序如此灵动”博客,这里讲述苏南大叔和计算机代码的故事。本文讲述script标签的async属性,语义上来说,async是用来异步加载的。那么,它的使用方式是怎么样的呢?
本文测试环境:win10chrome@100.0.4896.60

测试代码

本篇文章里面的测试代码,是基于defer的文章测试代码,可以先考虑前一篇文章的内容:

测试方式是通过浏览器访问web,并不是双击.html文件。

这里测试以下几种代码:

<script type="module" src="./1.js"></script>
<script type="module" async src="./2.js"></script>
<script type="module">
import aa from './3.js'
</script>
<script type="module" async>
import aa from './4.js'
</script>
<script async src="./5.js"></script>
<script src="./6.js"></script>
<script async>
console.log("7.js");
</script>
<script>
console.log("8.js");
</script>

其中3.js4.jsexport了一个空函数。

console.log("3.js");
export default ()=>{};

测试结果

这里先说基本原则:

  • async的意思是异步执行,被设置async的代码,在效果上会移动到页尾加载执行,完全忽视其在页面中的物理位置。
  • type="module"script,直接默认就是async的。加不加async都是async
  • 内联的script(就是把逻辑写在html页面里面的,不是保存为一个文件的),默认都不是async的。加不加async都不是async

然后苏南大叔在所有的被测试js前面,再加个内联的onload

<script>
    window.addEventListener('DOMContentLoaded', function () {
      console.log('DOMContentLoaded')
    })
</script>

然后,这8种js,以及这个DOMContentLoaded,到底谁先谁后呢?

苏南大叔:网页控制script脚本异步执行方案,async和defer属性异同 - 执行顺序
网页控制script脚本异步执行方案,async和defer属性异同(图3-2)

结论是这样的:非async的最先执行,而async的则在页面后面随机执行,甚至会出现比DOMContentLoaded更后执行。

可能是4.js里面需要compile的代码更多一些,所以在最后执行了。

特殊情况

在设置了async.js里面,使用document.write语句的话。会得到警告信息,并且不会正确输出.write信息。

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

苏南大叔:网页控制script脚本异步执行方案,async和defer属性异同 - 依然不支持document-write
网页控制script脚本异步执行方案,async和defer属性异同(图3-3)

deferasync属性应用场景

名称说明
defer多个script,相互之间有依赖关系的话,就可以设置defer属性。这样能完整的保持执行顺序。
asyncasync属性的script,因为其执行顺序不能保证。所以,对应的模块必须要独立使用,彼此之间没有依赖关系。

比如百度统计代码,实际上就不应该按照官方推荐放置到页面顶部,而是应该放置到页面底部,并且加上async属性。当然,如果您还是不明白到底该使用那个属性,那么,defer是最好的选择。

参考文献

综述

本文讲述了scriptasync属性,它可以把一些js移动到后面执行,以免阻碍页面渲染。更多js文章,可以点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   h5