defer 和 async：JavaScript异步编程的利器-Toy模板网

这篇具有很好参考价值的文章主要介绍了defer 和 async：JavaScript异步编程的利器。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

defer 和 async：JavaScript异步编程的利器,javascript,开发语言,ecmascript

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

摘要：

本文将介绍defer和async这两个JavaScript异步编程的关键概念，帮助您了解如何利用它们实现更高效、灵活的异步操作。

引言：

🌐 在现代Web开发中，异步编程是实现高效、响应式用户体验的关键。defer和async是JavaScript中的两个重要关键字，用于控制脚本的异步执行。接下来，让我们一起来探索defer和async的奥秘。

正文：

1️⃣ defer和async的概念

defer：defer关键字用于告诉浏览器，当整个页面在所有元素解析完成后执行脚本。这通常用于在不影响页面加载的情况下执行脚本。
async：async关键字用于告诉浏览器，立即开始下载脚本，一旦下载完成，就立即执行。这通常用于在不阻塞页面加载的情况下执行脚本。

以下是一些使用 defer 和 async 的代码示例：

使用 defer：

<!DOCTYPE html>
<html>
<head>
  <title>Defer Example</title>
  <script defer src="script1.js"></script>
  <script defer src="script2.js"></script>
</head>
<body>
  <h1>Defer Example</h1>
</body>
</html>

在这个示例中，script1.js 和 script2.js 会在 DOM 加载完成后按照顺序执行。

使用 async：

<!DOCTYPE html>
<html>
<head>
  <title>Async Example</title>
  <script async src="script1.js"></script>
  <script async src="script2.js"></script>
</head>
<body>
  <h1>Async Example</h1>
</body>
</html>

在这个示例中，script1.js 和 script2.js 会在加载的同时执行，可能会导致执行顺序与顺序不一致。

注意：这些示例仅用于演示 defer 和 async 的基本用法。在实际项目中，你可能需要根据具体需求和场景选择使用哪种方式。

2️⃣ defer和async的使用场景

在需要在不影响页面加载的情况下执行脚本时，可以使用defer关键字。
在需要在不阻塞页面加载的情况下执行脚本时，可以使用async关键字。

3️⃣ defer和async的工作原理

defer：当使用defer关键字时，浏览器会在整个页面加载完成后执行脚本。这意味着脚本将在页面加载完成后执行，但不会影响页面的加载。
async：当使用async关键字时，浏览器会立即开始下载脚本。一旦下载完成，就会立即执行脚本。这意味着脚本将异步执行，不会阻塞页面加载。

4️⃣ defer和async的优缺点

优点：defer和async都可以实现异步执行，提高页面加载速度和响应性。

缺点：async可能会导致脚本执行不按预期顺序进行，需要特别注意。

defer 和 async 都是 HTML 中的属性，用于控制脚本的加载和执行。它们有以下区别：

加载和执行顺序：defer 会将脚本的加载延迟到 DOM 加载完成后，然后按照顺序执行；async 则是在加载的同时执行，可能会导致脚本执行顺序与顺序不一致。
适用场景：defer 适用于需要按照顺序执行的脚本，例如一些依赖于 DOM 的脚本；async 适用于不依赖于 DOM 的脚本，例如一些需要异步执行的脚本。
兼容性：defer 在 IE 4.x 到 IE 9.x 中都支持，但在其他浏览器中可能不受支持；async 在所有现代浏览器中都被支持。
性能：async 在加载和执行脚本时可能会比 defer 更快，因为它不需要等待 DOM 加载完成。但是，如果脚本依赖于 DOM，那么 defer 可能会比 async 更快。

总结：defer 和 async 各有优缺点，具体使用哪种方式取决于具体的应用场景和需求。在现代浏览器中，推荐使用 async，因为它具有更好的兼容性和性能。

总结：

🎉 defer和async是JavaScript异步编程的关键概念，它们可以帮助我们实现更高效、灵活的异步操作。通过了解defer和async的概念、使用场景和工作原理，我们可以更好地利用它们提高页面加载速度和响应性。文章来源地址https://www.toymoban.com/news/detail-842934.html