数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学如何在HTML5中异步执行脚本？
script标签用于使网页动态化，但是大量的脚本可能会导致网页渲染缓慢，最终导致用户体验差。为了解决这个问题，我们异步执行网页中的脚本，即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>
使用async时，有一些重要事项需要注意
无论它们在HTML文件中的位置如何，具有async属性的脚本在下载完成后立即开始运行。这意味着如果脚本依赖于其他尚未完成加载的资源（例如图像或样式表），则脚本可能会导致问题或意外行为。
HTML文件中具有async属性的脚本的运行顺序是未知的。如果执行顺序很重要，当一个脚本依赖于另一个脚本时，这可能会很麻烦。
具有async属性的脚本不会阻塞页面的渲染。虽然提高了页面的加载时间，但这也会导致内容未设置样式或其他视觉故障的情况。
为了消除这些问题，HTML5提供了一个defer属性，允许脚本异步下载，并确保依赖于其他资源的脚本按正确的顺序执行，从而减少错误或故障的可能性。
方法二：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>内容加载稍后才加载，这是由于脚本执行而阻塞的。但是，当在script标签中使用async和defer属性时，不会遇到此类问题。
结论
HTML5中的async/defer属性允许异步加载脚本。当遇到具有async属性的脚本时，浏览器会在页面仍在渲染时后台下载脚本。
HTML5中的async/defer属性允许异步加载脚本。当遇到具有async属性的脚本时，浏览器会在页面仍在渲染时后台下载脚本。
浏览量：332
