defer和async是什么？？
defer
HTML4.01为<script>标签定义了defer属性，这个属性的用途是表明脚本在执行的时候不会影响到页面的构造，换句话说就是，脚本文件会在整个页面都解析完之后再被延迟执行，因此，<script>标签设置了defer属性后浏览器会立即下载，但是会被延迟执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./test.css">
<script src="./test1.js" defer></script>
<script src="./test2.js" defer></script>
</head>
<body>
</body>
</html>
在该例子中，我们虽然把<script>放在了<head>元素中，但是其包含的脚本会延迟到浏览器遇到</html>标签（即解析完html之后）再执行。
如例子中，有两个延迟脚本，按照html5规范，两个脚本会按顺序执行（即使test2.js先下载完也不能执行，也要等到test1.js下载执行完毕后，在执行test2.js），并在DOMContentLoaded事件执行之前。
async
HTML5为<script>标签定义了async属性。这个属性和defer相似，都用于改变处理脚本的行为。与defer类似，其用途也是告诉浏览器下载脚本文件，但是与defer不同的是，标记为async的脚本浏览器会立即下载并执行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./test.css">
<script src="./test1.js" async ></script>
<script src="./test2.js" async ></script>
</head>
<body>
</body>
</html>
在上面代码中，第二个脚本文件可能会在第一个脚本文件之前执行，与defer不同的是，多个async谁先下载好，谁执行。
小结
defer和async在网络下载都是一样的，和html解析异步进行。- 它俩的差别在于脚本下载完之后何时执行，
defer属性会在html解析之后执行 ，async则会在及饿哦本下载完就开始执行。 - 多个
defer会按顺序进行执行，多个async则不一定，谁先下载完谁先执行。
276
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
