2.1.3async异步执行脚本

最新推荐文章于 2024-05-23 23:33:04 发布

青龙卧深潭

最新推荐文章于 2024-05-23 23:33:04 发布

阅读量73

点赞数

分类专栏： JavaScript高级程序设计笔录文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_42776017/article/details/130878438

版权

JavaScript高级程序设计笔录专栏收录该内容

16 篇文章 0 订阅

订阅专栏

HTML5为 script 元素定义了 async 属性。从改变脚本处理方式上看，async 属性与 defer 属性类似。
当然，它们两者都只适用于外部脚本，都会告诉浏览器立即下载。不过，与 defer 不同的是，标记为 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>js程序测试</title>
    <script async src="example1.js"></script>
    <script async src="example2.js"></script>
</head>
<body>
	<!--这里是页面内容！-->
</body>
</html>

在这个列子中，第二个脚本可能先于第一个脚本执行。
因此，重点在于它们之间没有依赖关系。
给脚本添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再去加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。
正因如此，异步脚本不应该再加载期间修改DOM。
但是异步脚本会保证再 load 事件前执行，但是可能会在 DOMContentLoaded 事件之前或者之后执行。
使用该属性之后，也相当于你告诉页面你不会使用 document.write

青龙卧深潭

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
2.1.3async异步执行脚本

当然，它们两者都只适用于外部脚本，都会告诉浏览器立即下载。给脚本添加 async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再去加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。从改变脚本处理方式上看，async 属性与 defer 属性类似。但是异步脚本会保证再 load 事件前执行，但是可能会在 DOMContentLoaded 事件之前或者之后执行。在这个列子中，第二个脚本可能先于第一个脚本执行。正因如此，异步脚本不应该再加载期间修改DOM。因此，重点在于它们之间没有依赖关系。
复制链接

扫一扫