深入理解javascript中defer的作用

2023年6月10日下午1:22 • JavaScript

深入理解JavaScript中defer的作用

什么是defer

defer是HTML5中定义的一种异步加载脚本的方法，可以让脚本文件在后台加载，不影响页面的渲染，等到页面加载完成后再执行脚本。

如何使用defer

使用defer很简单，只需要在script标签中设置defer属性即可，例如：

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

defer的作用

defer的作用是将脚本的加载和执行分开，使得页面在加载脚本的同时可以继续渲染，从而提高页面的加载速度。通常情况下，在脚本文件较大或者需要在页面渲染完成后才执行的时候，使用defer可以得到更好的效果。

示例说明

示例1

假设我们需要在页面上使用一个jQuery库，并且在jQuery加载完成后再自定义的脚本中使用它，我们可以将jQuery库文件的script标签设置defer属性，示例如下：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <script defer src="jquery.min.js"></script>
    <script defer src="example.js"></script>
  </body>
</html>

在example.js中使用jQuery库：

document.addEventListener("DOMContentLoaded", function(event) { 
  // 当页面加载完成时执行以下操作
  $(document).ready(function(){
    // 查询DOM元素
  });
});

在上面的示例中，由于设置了defer属性，jQuery库文件不会阻塞页面的渲染，example.js会在页面加载完成后执行，从而在example.js中使用jQuery库。

示例2

在一些需要加载多个脚本文件的页面中，使用defer可以使得脚本的加载和执行的顺序更加明确，例如：

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <script defer src="jquery.min.js"></script>
    <script defer src="underscore.min.js"></script>
    <script defer src="example.js"></script>
  </body>
</html>

在上面的示例中，由于设置了defer属性，浏览器会按照script标签的顺序加载这三个脚本文件，但是只有在页面加载完成后才执行它们。