异步首先我们需要知道html中页面中插入<script></script>在正式的html规范中：
async属性：表示应该立即下载脚本，但不妨碍页面中的其他操作，比如下载资源或等待加载其他脚本。但这个属性只是对外部文件有效。
defer属性：表示脚本可以延迟到html文档完全被解析显示之后才开始加载，它也是对外部文件有效。也就相当于告诉浏览器，立即下载，但是延迟执行。
但是只要不存在async || defer属性，浏览器都会按照<script></script>元素在页面中的出现的先后顺序对他们依次解析。在第一个<script></script>元素包含的代码解析完成后，第二个包含<script></script>的代码才会被解析到，接下来才是第三个...第四个...
下面展示一段代码,理解async！
<!doctype html>
<html>
<head>
<title></title>
<script type="text/javascript" async src="js/e1.js"></script>
<script type="text/javascript" async src="js/e2.js"></script>
.cc {
color: red;
}
.bb {
color: blue;
}
</head>
<body>
<h1 id="a">我是红色？还是蓝色？</h1>
</body>
</html>
这个代码中，第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。制定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容。
网友评论