<script>标签中async属性、defer属性的比较

默认情况下,浏览器渲染引擎遇到<script>标签会先加载文件再立即执行文件,等文件执行完后,才会往下继续解析。
而带有这两个属性中任意一种的<script>标签,属于异步加载的语法。浏览器渲染引擎执行到这一行不会等待加载文件全部执行完后再解析,而是直接解析后面的代码。这样做可以避免某些体积很大的脚本因加载时间过长,长时间等待造成浏览器阻塞,没有响应而带来不好的体验,是页面性能优化的一种方法

1.async属性:
  • 带有这个属性的script标签,在标签内js文件的加载过程中不会影响HTML标签的解析,但是js文件加载完了后会立即执行,执行过程中会停止HTML标签的解析,等js文件全部执行完毕后,才会继续HTML标签的解析。

  • 另外,如果有多个script标签都有async属性,不能确定哪个先加载完哪个后加载完,先加载完的文件会先执行,执行过程中会停止HTML标签的解析,但是其它文件的加载不会受到影响。因此,对于多个带有async属性的脚本不能保证它们按照指定的先后顺序去执行。

2.defer属性:
  • 带有这个属性的script标签,在标签内js文件的加载过程中不会影响HTML标签的解析,文件加载完成后不会立即执行,必须等到HTML标签全部加载解析完成后,才会去执行加载好的文件。

  • 如果同样有多个script标签带有这个属性,加载文件的执行就存在先后顺序,先加载完成的文件先执行。

————————————————————————————————

最后,附一张<script>、<script async>、<script defer>三种形式代码执行过程的差异。


image.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。