浅析script标签中的defer与async属性

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

当我们在HTML文档中使用<script>标签引入JavaScript文件时，我们可以为这个标签添加两个重要的属性：defer和async。这两个属性都是为了优化JavaScript的加载和执行，但它们有一些不同之处。下面我们来分别对这两个属性进行详细的解析。

Defer属性

defer属性告诉浏览器，这个脚本将被延迟到页面加载完成后再执行。这意味着脚本将在HTML文档解析完毕后才开始执行，并且在DOMContentLoaded事件触发之前完成执行。

示例1：下面的代码演示了如何使用defer属性来延迟执行JavaScript代码。

<!DOCTYPE html>
<html>
  <head>
    <title>使用defer属性</title>
  </head>
  <body>
    <h1>使用defer属性</h1>
    <script defer src="js/app.js"></script>
  </body>
</html>

在这个例子中，浏览器将首先解析HTML文档，然后尝试下载app.js文件。但是，因为这个标签包含了defer属性，浏览器将不会立即执行这个文件中的代码，而是等到HTML文档解析完毕后再执行。这个属性可以确保JavaScript代码不会阻止HTML文档的加载和渲染，从而提高页面的性能和用户体验。

Async属性

async属性告诉浏览器，这个脚本将在下载后立即执行，而不需要等待HTML文档的解析完成。这意味着脚本将在下载和执行HTML文档同时进行，因此可以更快地执行它们。

示例2：下面的代码演示了如何使用async属性来异步加载JavaScript代码。

<!DOCTYPE html>
<html>
  <head>
    <title>使用async属性</title>
  </head>
  <body>
    <h1>使用async属性</h1>
    <script async src="js/app.js"></script>
  </body>
</html>

在这个例子中，浏览器将在下载app.js文件后立即执行其中的代码，而不需要等待HTML文档的解析完成。这个属性可以确保JavaScript代码能够尽快地执行，但是也可能会导致页面出现问题，因为这个时候HTML文档可能还没有完全解析。

总之，使用defer属性可以确保JavaScript代码在HTML文档解析完毕后再执行，而使用async属性可以让JavaScript代码立即执行，但可能发生竞争条件。因此，在选择使用这两个属性时，应该根据具体的情况进行权衡和选择。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：浅析script标签中的defer与async属性 - Python技术站