HTML <script> 标签的 defer 属性 详解
HTML基础 2022-06-02 12:07:01小码哥的IT人生shichen
HTML <script> 标签的 defer 属性
实例
在页面加载之前不会运行脚本：
<script src="demo_defer.js" defer></script>
完整实例【亲自试一试】：
<!DOCTYPE html>
<html>
<body>
<h1>script defer 属性</h1>
<script src="/demo/tags/demo_defer.js" defer></script>
<p>上面的脚本从下面的段落请求信息。通常这是不可能的，因为脚本是在段落存在之前执行的。</p>
<p id="p1">Hello World!</p>
<p>但是，defer 属性指定脚本应该稍后执行。这样脚本可以从段落中请求信息。</p>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
defer 属性是布尔属性。如果已设置，它规定在页面完成解析时执行脚本。
注释：defer 属性仅适用于外部脚本（仅应在 src 属性存在时使用）。
注释：有几种可以执行外部脚本的方法：
- 如果设置 async：脚本与页面的其余部分异步执行（脚本将在页面继续解析时执行）
- 如果不设置 async 且社会 defer：当页面完成解析时执行脚本
- 如果 async 或 defer 都不存在：在浏览器继续解析页面之前立即获取并执行脚本
详细说明
defer 属性规定是否对脚本执行进行延迟，直到页面加载为止。
有的 javascript 脚本 document.write 方法来创建当前的文档内容，其他脚本就不一定是了。
如果您的脚本不会改变文档的内容，可将 defer 属性加入到 <script> 标签中，以便加快处理文档的速度。因为浏览器知道它将能够安全地读取文档的剩余部分而不用执行脚本，它将推迟对脚本的解释，直到文档已经显示给用户为止。
浏览器支持
表格中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| defer | 8.0 | 10.0 | 3.5 | 5.0 | 15.0 |
语法
<script defer>