script标签之async与defer

5/10/2021 JavaScriptdeferasync

# 文章目录

# 一、页面的加载和渲染过程

  1. 浏览器通过HTTP协议请求服务器,获取HMTL文档并开始从上到下解析,构建DOM

  2. 在构建DOM过程中,如果遇到外联的样式声明和脚本声明,则暂停文档解析,创建新的网络连接,并开始下载样式文件和脚本文件;

  3. 样式文件下载完成后,构建CSSDOM;脚本文件下载完成后,解释并执行,然后继续解析文档构建DOM

  4. 完成文档解析后,将DOMCSSDOM进行关联和映射,最后将视图渲染到浏览器窗口 。

在这个过程中,脚本文件的下载和执行是与文档解析同步进行,也就是说,它会阻塞文档的解析,如果控制得不好,在用户体验上就会造成一定程度的影响。

<script src="script.js"></script>
没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该
script
标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。

<script async src="script.js"></script>
有 async,加载和渲染后续文档元素的过程将和 script.js
的加载与执行并行进行(异步)。

<script defer src="myscript.js"></script>
有 defer,加载后续文档元素的过程将和 script.js 的加载并行进行(异步),但是
script.js 的执行要在所有元素解析完成之后,DOMContentLoaded 事件触发之前完成。
1
2
3
4
5
6
7
8
9
10
11
12

# 二、defer

用于开启新的线程下载脚本文件,并使脚本在文档解析完成后执行。

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

HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoad时间触发前执行,因此最好只包含一个延迟脚本。

# 三、async

HTML5新增属性,用于异步下载脚本文件,下载完毕立即解释执行代码。

这个属性与defer类似,都用于改变处理脚本的行为。同样与defer类似,async只适用于外部脚本文件,并告诉浏览器立即下载文件。但与defer不同的是,标记为async的脚本并不保证按照它们的先后顺序执行。

第二个脚本文件可能会在第一个脚本文件之前执行。因此确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容。
在这里插入图片描述

# 四、图解 本文核心

在这里插入图片描述
蓝色线代表网络读取
红色线代表执行时间
这俩都是针对脚本的;绿色线代表 HTML 解析。

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

本文转载至:简书-小小的白菜 (opens new window)
链接:https://www.jianshu.com/p/c7c331ea4fe8

最后更新于: 2021年9月15日星期三晚上10点10分
Faster Than Light
Andreas Waldetoft / Mia Stegmar