HTML5 如何异步执行脚本

脚本标签用于使网页动态化，但是较重的脚本可能导致网页呈现缓慢，进而影响用户体验。为解决这个问题，我们可以异步执行网页中的脚本，即javascript在完成下载后与其他网站元素并行下载并开始执行。

加载脚本异步执行的两种常用方法如下：

Async 属性 ：脚本并行下载，并在下载完成后立即开始执行。
Defer 属性 ：脚本并行下载，并在页面解析过程完成后开始执行。

如果没有使用这些属性的话，脚本将在下载完成后立即开始执行，这也会阻止解析过程。

方法一：Async属性

在这个例子中，我们将使用JavaScript中提供的async标签来异步执行脚本。

语法

<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>

在使用异步时需要记住几个重要的事情：

无论它们在HTML文件中的位置如何，具有异步属性的脚本在下载完成后立即开始运行。这意味着，如果脚本依赖于其他资源（例如图片或样式表）尚未完成加载，则可能导致问题或意外行为。
具有异步属性的脚本在HTML文件中的执行顺序是不确定的。如果执行顺序很重要，当一个脚本依赖于另一个脚本时，可能会引发问题。
具有异步属性的脚本不会阻塞页面的渲染。尽管页面的加载时间得到了改善，但也可能导致内容无样式或其他视觉故障的情况。

为了解决这些问题，HTML5提供了延迟属性(defer attribute)，它允许脚本异步下载，并确保依赖其他资源的脚本按正确顺序执行，减少错误或故障的可能性。

方法二：延迟属性

在这个例子中，我们将展示如何使用设置为true的延迟属性来加载脚本。

语法

<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> 内容需要一段时间才会加载，这是由于脚本执行而被阻塞。然而，在使用 script 标签的 async 和 defer 属性时，并没有遇到这样的问题。