Javascript中的defer属性详解|极客笔记

Javascript中的defer属性详解

在Javascript中，defer是一个常见的属性，用于控制脚本的加载和执行顺序。通过设置defer属性，我们可以让脚本在页面加载完成后再执行，而不会阻塞页面的渲染。本文将对defer属性进行详细解释，并举例说明其使用场景和注意事项。

什么是defer属性？

defer是HTML中<script>标签的一个属性，用于延迟脚本的执行。通常情况下，浏览器在解析HTML文档时会遇到<script>标签就会立即执行脚本，这可能会导致脚本的执行顺序与页面元素加载顺序不一致，影响页面的正常功能。而设置defer属性后，浏览器会在解析完整个文档后再依次执行脚本。

defer属性的用法

要在<script>标签中设置defer属性，只需要在标签内添加defer即可，如下所示：

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

在上面的代码中，script.js是一个外部脚本文件，设置了defer属性，表示该脚本会被延迟执行。

defer属性的特点

defer属性只对外部脚本文件有效，内联脚本（即在<script>标签内直接编写的脚本）不受其影响。
多个带有defer属性的脚本文件会按照它们在文档中出现的顺序依次执行。
defer属性只在没有async属性的情况下有效，如果同时设置了async和defer，那么async属性会覆盖defer属性，脚本会以异步方式执行。

使用defer属性的示例

下面我们来看一个简单的示例，演示defer属性的作用：

<!DOCTYPE html>
<html>
<head>
    <title>Defer Example</title>
</head>
<body>
    <h1>Hello, World!</h1>

    <script src="script1.js" defer></script>
    <script src="script2.js" defer></script>
</body>
</html>

假设script1.js和script2.js分别包含以下内容：

// script1.js
console.log('Script 1 is executed');

// script2.js
console.log('Script 2 is executed');

在上面的示例中，script1.js和script2.js带有defer属性，因此它们会在页面加载完成后按序执行。当我们在浏览器中打开这个页面时，控制台会依次输出：

Script 1 is executed
Script 2 is executed

这证实了defer属性确保脚本按照其在文档中的顺序执行。

注意事项

在使用defer属性时，有一些需要注意的地方：

defer属性只在HTML5规范中引入，不支持的浏览器可能会无法正常执行脚本。
使用defer属性可以优化页面加载速度，但对于立即需要执行的脚本（如修改DOM结构），最好不要设置defer。
注意多个带有defer属性的脚本文件在执行过程中可能出现依赖关系，需要谨慎处理加载顺序。

总结

在本文中，我们详细介绍了Javascript中的defer属性，包括其用法、特点、示例以及注意事项。通过合理使用defer属性，我们可以控制脚本的执行顺序，提高页面加载性能，改善用户体验。

Javascript中的defer属性详解