script 标签的 async 和 defer 属性

script 标签

浏览器解析 HTML 时，遇到 <script> 标签会暂停解析，直到 <script>内容下载完成并执行完毕，才会继续解析。
如果 js 文件很大或者 js 脚本执行时间很长，就会导致页面加载时间过长。

script 标签 async 属性

• async 属性表示异步加载 js 文件，不会阻塞页面的解析 HTML。
• 当页面解析到 <script async> 标签时，会立即下载 js 文件，但不会等待 js 文件下载完成，就会继续解析 HTML，即边解析边下载。
• 当 js 文件下载完成后，会立即执行 js 文件，浏览器等待 js 文件执行完毕后，才会继续解析 HTML。
• 如果 <script async> 请求完成前，页面已经解析完毕，那么 js 文件会在页面加载完成后立即执行。
• 当有多个 <script async> 标签时，浏览器会按照标签的顺序下载 js 文件，因为不能确定哪个文件先下载完，所以 js 文件的执行顺序是不确定的。
• async属性只对外部脚本文件有效，对内联脚本无效。

script 标签 defer 属性

• defer 属性不会阻塞浏览器的解析 HTML，但会阻塞 js 文件的执行，即边解析边下载，但是 js 文件下载完成后，会等待 HTML 解析完毕后，再执行 js 文件。
• 当有多个 <script defer> 标签时，浏览器会按照标签的顺序下载 js 文件，因为 js 文件的下载是按顺序的，所以 js 文件的执行顺序是确定的。