js defer属性详解|极客笔记

js defer属性详解

概述

JavaScript是一门广泛用于网页开发的脚本语言，而defer属性则是JavaScript的一个重要特性之一。defer属性可以用于<script>标签中，用于控制脚本的加载和执行时机。在本文中，我们将详细解释defer属性的作用、用法以及它与其他属性（如async）的区别。

`defer`属性的作用

defer属性用于延迟脚本的执行，即脚本会在HTML文档解析完毕后再执行。这意味着即使脚本位于文档的<head>标签内，它也不会阻塞页面的解析和渲染过程。

与使用defer属性的脚本不同，普通的JavaScript脚本（如不使用任何属性）会立即下载并执行，它们会阻塞HTML文档的解析和渲染，直到脚本执行完毕。

需要注意的是，defer属性仅适用于外部脚本，即通过src属性指向外部JavaScript文件的脚本。对于内联脚本（即直接在<script>标签内编写的脚本），defer属性是无效的。

`defer`属性的用法

将defer属性应用于<script>标签非常简单，只需在<script>标签内添加defer关键字即可。例如：

<script defer src="example.js"></script>

在上述示例中，我们将脚本文件example.js应用了defer属性。

`defer`属性的执行时机

有多种情况下，脚本使用defer属性后将在何时执行，主要取决于脚本的加载顺序以及页面解析的进程。

当defer属性的脚本位于<head>标签内时，脚本会在HTML解析完成后立即执行。此时，如果有多个使用了defer属性的脚本，则它们会按照顺序依次执行。
```
<head>
    <script defer src="script1.js"></script>
    <script defer src="script2.js"></script>
</head>
```
当defer属性的脚本位于<body>标签内时，脚本会在HTML文档解析完成后执行。此时，如果有多个使用了defer属性的脚本，则它们会按照顺序依次执行。
```
<body>
    <script defer src="script1.js"></script>
    <script defer src="script2.js"></script>
</body>
```

需要注意的是，defer属性的脚本执行时机与脚本的加载顺序有关。即使两个或多个脚本使用了defer属性，如果后面的脚本依赖前面的脚本，那么它们的执行顺序也将按照加载顺序。

`defer`与`async`的区别

除了defer属性外，JavaScript还提供了async属性用于控制脚本的加载和执行时机。async属性与defer属性不同的是，async属性用于异步加载脚本，即脚本的加载和页面的解析可以同时进行，而不会阻塞解析过程。

与使用defer属性的脚本不同，使用async属性的脚本一旦下载完成，就会立即执行，而不管页面是否已解析完毕。这意味着如果一个脚本使用了async属性，且该脚本依赖于页面中的某个元素，那么脚本可能会在该元素解析完毕之前就开始执行，可能导致报错。

需要注意的是，async属性仅适用于外部脚本，并且与defer属性互斥。如果同时使用了async和defer属性，浏览器将会忽略defer属性，但按照加载顺序执行带有async属性的脚本。

使用`defer`属性的示例

为了更好地理解defer属性的使用，我们来看一个简单的示例。假设我们有一个HTML页面，其中包含两个使用了defer属性的脚本。

<!DOCTYPE html>
<html>
<head>
    <title>使用defer属性示例</title>
    <script defer src="script1.js"></script>
    <script defer src="script2.js"></script>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

在上述示例中，我们在<head>标签内引入了两个脚本文件script1.js和script2.js，它们分别是：

script1.js:

console.log("Script 1 is executed.");

script2.js:

console.log("Script 2 is executed.");

当我们在浏览器中打开该页面时，可以在控制台中看到以下输出：

Script 1 is executed.
Script 2 is executed.

由此可见，带有defer属性的脚本会按照加载顺序依次执行，且在页面解析完成后执行。

总结

在本文中，我们详细解释了JavaScript中的defer属性的作用、用法以及它与async属性的区别。defer属性可以使脚本的执行被延迟到HTML文档解析完成后，从而不会阻塞页面的解析和渲染过程。需要注意的是，defer属性仅适用于外部脚本，并且与async属性互斥。

js defer属性详解