HTML - defer 属性

HTML defer 属性是一个布尔属性，它指定脚本与页面解析并行下载，并在页面解析完成后执行。

它仅用于外部脚本（仅当存在 src 属性时才应使用）。换句话说，当您在脚本标签中使用 defer 属性时，它会告诉浏览器在继续解析 HTML 文档的同时下载脚本文件。

如果<script>中不存在 src 属性，则 defer 属性不会对其产生影响。

语法

<script defer></script>

应用于

以下列出的元素允许使用 HTML defer 属性

元素	描述
<script>	HTML <script> 标签用于将脚本导入 HTML 文档。

HTML defer 属性示例

以下示例将说明 HTML defer 属性，以及我们应该在哪里以及如何使用此属性！

使用 script 元素的 defer 属性

在以下示例中，我们将使用 <script> 元素的 defer 属性来在解析页面的同时并行下载脚本。

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML 'defer' attribute</title>
</head>

<body>
    <!--HTML 'defer' attribute-->
    <h3>Example of the HTML 'defer' attribute</h3>
    <!--'defer' attribute within the script element-->
    <p>
        If the 'src' attribute is not present in
        script element, it would have no effect</p>
    <script src="index.js" defer></script>
</body>

</html>

index.js 文件

alert("Hello world");

检查 defer 属性是否存在

考虑另一种情况，我们将运行 JavaScript 代码以检查 defer 属性是否存在于 script 元素中。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>HTML 'defer' attribute</title>
   <style>
      div {
         color: green;
         font-weight: bold;
         font-size: 20px;
      }

      button {
         width: 100px;
         padding: 15px;
         cursor: pointer;
         color: white;
         background-color: green;
         border: none;
         border-radius: 5px;
      }
   </style>
</head>
<body>
   <!--HTML 'defer' attribute-->
   <h3>Example of the HTML 'defer' attribute</h3>
   <!--'defer' attribute within the script element-->
   <p>If the 'src' attribute is not present in script
    element, it would have no effect</p>
   <div id='res'></div>
   <br>
   <button onclick="check()">
      Check
   </button>
   <script src="index.js" 
      id="demo" 
      defer>
      </script>
   <script>
      function check() {
         let x = document.getElementById('demo').defer;
         let res = document.getElementById('res');
         res.innerHTML = "Is the 'defer' attribute present" +
         "within the 'script' element or not? " + x;
      }
   </script>
</body>
</html>

支持的浏览器

属性
defer	是 18.0	是 10.0	是 3.6	是 6.0	是 15.0

html_attributes_reference.htm

打印页面