如何在 HTML5 中异步执行脚本?
Script 标签用于使网页动态化，然而繁重的脚本会导致网页渲染缓慢，最终导致用户体验不佳。为了解决这个问题，我们异步执行网页中的脚本，即 JavaScript 与其他网站元素并行下载，并在下载完成后立即开始执行。
异步加载脚本有两种常用方法:
async 属性:脚本并行下载，并在下载完成后立即开始执行。
Defer 属性:脚本并行下载，仅在页面解析过程完成后才开始执行。
如果没有这些属性，脚本会在下载后立即开始执行，这同样会导致解析过程阻塞。
方法 1:async 属性
在本例中，我们将研究如何使用 JavaScript 中提供的 async 标签异步执行脚本。 JavaScript。
语法
<script src="..." async></script>
async 是一个布尔属性，在 <> 中定义时为 true，否则默认为 false。
算法
步骤 1:使用 HTML 标签定义网页框架
步骤 2:使用 <script > 标签导入脚本
步骤 3:在 <script> 标签中添加 async 属性
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Javascript</title>
</head>
<body>
<h1>Tutorials Point</h1>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" async></script>
<!-- Loaded after sometime if aysnc attribute is removed -->
<h3>Welcome to Tutorials point</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla debitis deleniti harum perferendis quisquam,
cum dignissimos ex laborum saepe pariatur sapiente dolores possimus autem quam voluptates commodi a eveniet facere!
</p>
<button onclick="window.location.reload()">Reload</button>
</body>
</html>
使用 async 时需要注意以下几点:
无论位于 HTML 文件中的哪个位置，具有 async 属性的脚本都会在下载后立即开始运行。这意味着，如果脚本依赖于其他尚未加载完成的资源(例如图片或样式表)，则可能会导致问题或意外行为。
具有 async 属性的脚本在 HTML 文件中的运行顺序事先是未知的。如果执行顺序很重要，而一个脚本依赖于另一个脚本，则可能会出现问题。
具有 async 属性的脚本不会阻止页面的渲染。虽然页面的加载时间有所改善，但这也可能导致内容样式不完整或其他视觉问题。
为了消除这些问题，HTML5 提供了一个 defer 属性，允许脚本异步下载，并确保依赖于其他资源的脚本按正确的顺序执行，从而降低出现错误或故障的可能性。
方法 2:Defer 属性
在此示例中，我们将展示如何使用设置为 true 的 defer 属性来加载脚本。
语法
<script src="..." defer></script>
defer 是一个布尔属性，在 <> 中定义时为 true，否则默认为 false。
算法
步骤 1:使用 HTML 标签定义网页框架
步骤 2:使用 <script > 标签导入脚本
步骤 3:在 <script> 标签中添加 defer 属性
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Async Javascript</title>
</head>
<body>
<h1>Tutorials Point</h1>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js" defer></script>
<!-- Loaded after sometime if defer attribute is removed -->
<h3>Welcome to Tutorials Point</h3>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Nulla debitis deleniti harum perferendis quisquam,
cum dignissimos ex laborum saepe pariatur sapiente dolores possimus autem quam voluptates commodi a eveniet facere!
</p>
<button onclick="window.location.reload()">Reload</button>
</body>
</html>
从输出结果中我们可以看到，<h1> 标题内容在网页加载后立即加载，但 <h3> 和 <p> 内容加载之后需要一段时间，这是由于脚本执行导致的。然而，当脚本标签使用 async 和 defer 属性时，则不会出现此类问题。
结论
HTML5 中的 async/defer 属性支持脚本的异步加载。当遇到具有 async 属性的脚本时，浏览器会在页面仍在渲染时在后台下载该脚本。
HTML5 中的 async/defer 属性支持脚本的异步加载。当遇到具有 async 属性的脚本时，浏览器会在页面仍在渲染时在后台下载该脚本。
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
