defer 和 async 介绍

deferasync<script> 元素的两个属性,经常用来延迟执行脚本,只针对外部脚本文件,当 <script>src 属性不存在时,不能使用 deferasync

这两个均是布尔属性 (boolean attribute),也就是说,只要属性名出现就为 true,不管属性值为何。

<script src="my.js" defer></script>
<script src="my.js" defer="defer"></script>
<script src="my.js" defer="false"></script>
<!-- 三个均为 true -->

使用这两个属性都是为了减少等待脚本下载的时间。defer 是在 HTML4.0 中定义的,作用是将脚本延迟到页面解析完毕以后再执行,并且所有被延迟的脚本会按照原先的顺序执行。async 则是 HTML5 中引入的,作用是异步执行脚本,在等待脚本下载的同时继续解析页面,一旦下载完毕就立即执行。因此,使用 async 的脚本可能不会按照原先在文档中的顺序执行。这两个属性使用的规则如下:

  1. 只要 async 为 true,那么脚本异步执行 (一旦下载完毕立即执行)。
  2. 如果 async 为 false,defer 为 true,那么脚本在页面解析完毕以后执行。
  3. 如果 asyncdefer 均为 false,那么停止页面解析,直到脚本下载、执行完毕。

微软从 IE10 才开始支持 async,因此为了兼容,一般会同时使用两个属性,在不支持 async 的浏览器中会自动使用 defer

flight