JavaScript —— script标签defer和async的区别

盏灯
131 阅读2分钟

🛵 前言

在 HTML 中，<script> 标签用于引入 JavaScript 文件或将 JavaScript 代码直接嵌入到页面中。<script> 标签有两个属性 defer 和 async，它们可以用于控制脚本的加载和执行方式。

😁 区别：

defer

  • 告诉浏览器延迟执行脚本，直到文档解析完成。

  • 也就是说，脚本的下载和解析将在页面渲染完成后执行。

  • 如果有多个 defer 脚本，它们将按照它们在页面中出现的顺序依次执行。

  • 只有外部脚本可以使用 defer 属性。

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

async

  • 告诉浏览器立即下载并执行脚本，与页面渲染的过程同时进行，不会阻塞页面渲染。

  • 也就是说，脚本的下载和解析将在页面渲染过程中尽可能早地进行。

  • 如果有多个 async 脚本，它们将按照它们下载完成的顺序依次执行。

  • 只有外部脚本可以使用 async 属性。

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

总的来说，defer 属性用于延迟脚本的执行，等待整个文档解析完成后再执行，然而 async 属性用于异步加载脚本，不阻塞页面渲染，脚本下载完成后立即执行。

需要确保脚本按照特定的顺序执行，用 defer 属性；

尽快下载并执行脚本，并且它们之间的执行顺序无关紧要，用 async 属性。

🌰例子

defer 例子1

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script src="example.js" defer></script>
  </body>
</html>

在这个例子中，example.js 脚本会在页面加载完成后执行，但在页面渲染前会下载和解析。这样可以确保脚本会在整个文档解析完成后执行，而不会影响页面渲染。

defer 例子2

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
    <script defer>
      console.log("This script is deferred and will execute after the entire document is parsed.");
    </script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

在这个例子中，使用了内联脚本，并且添加了 defer 属性。这意味着脚本会在整个文档解析完成后执行。

在这种情况下，由于脚本是在 <head> 中定义的，因此它将在页面渲染之前下载和解析，但是如果没有 defer 属性，它将阻塞页面渲染。

defer 例子3

使用多个 defer 脚本

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
    <script src="script1.js" defer></script>
    <script src="script2.js" defer></script>
    <script src="script3.js" defer></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

在这个例子中，有三个 defer 脚本，它们将按照它们在页面中出现的顺序依次执行。这意味着 script1.js 将先执行，然后是 script2.js，最后是 script3.js。

async 例子1

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <script src="example.js" async></script>
  </body>
</html>

在这个例子中，example.js 脚本会在页面加载时立即下载并执行，不会阻塞页面渲染。这样可以尽快下载并执行脚本，并且不会影响页面渲染的速度。

async 例子2

使用多个 async 脚本

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
    <script async>
      console.log("This script is async and will execute as soon as it's downloaded.");
    </script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

在这个例子中，使用了内联脚本，并且添加了 async 属性。这意味着脚本会在下载完成后立即执行，而不会阻塞页面渲染。在这种情况下，由于脚本是在 <head> 中定义的，因此它将在页面渲染之前下载和解析。如果没有 async 属性，它将阻塞页面渲染。

async 例子3

使用多个 async 脚本

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
    <script src="script1.js" async></script>
    <script src="script2.js" async></script>
    <script src="script3.js" async></script>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

在这个例子中，有三个 async 脚本，它们将在下载完成后按照它们下载完成的顺序依次执行。

这意味着脚本的执行顺序与它们在页面中出现的顺序无关紧要。

至此完成

avatar
文章
阅读
粉丝