js加载方式
-
正常加载方式： 首先解析HTML,解析时遇到外部引入js文件，停止解析HTML，开始下载js，然后进行 解析，最后，在执行解析HTML
-
defer加载方式： 将所有HTML都进行解析并完成之后，才会解析HTML
顺次执行 -
async加载方式： 和HTML解析同步执行（一起）
谁先加载完谁执行
js延迟加载的方法
1. defer
2. async
defer
示例：
//创建一个script.js文件
console.log('script.js')
//创建一个a.js文件
console.log('aaaa')
//创建一个b.js文件
console.log('bbbb')
//创建一个html文件
<!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 defer src="script.js"></script>
<script defer src="a.js"></script>
<script defer src="b.js"></script>
</head>
<body>
<div id="box"> 111111</div>
</body>
</html>
async
示例：
//创建一个script.js文件
console.log('script.js')
//创建一个a.js文件
console.log('aaaa')
//创建一个b.js文件
console.log('bbbb')
//创建一个html文件
<!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="script.js"></script>
<script async src="a.js"></script>
<script async src="b.js"></script>
</head>
<body>
<div id="box"> 111111</div>
</body>
</html>
