为什么要延时加载
把script标签放到head里时会出现script里的js不能获取到dom的情况。这是因为dom解析时遇到script就解析script里的内容，会下载script里的js文件，解析然后执行，可能文件里有操作dom，但是需要操作的dom还没解析出来。
比如：
<!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>Document</title>
<script type="text/javascript" src="延时加载.js"></script>
</head>
<body>
<div id="box">11111</div>
</body>
</html>
console.log(document.getElementById('box'))
如何延时加载
1.使用aysnc
2.使用defer
两种种方式的区别
-
aysnc:
加了async属性后，解析html和script标签是并行的，当解析的dom足以让script里的js文件执行时，就会暂停解析dom，然后执行js文件，执行完毕后继续解析html。 解析多个script时，js文件先下载好的先执行。 -
defer:
加了defer属性后，解析html和script也是并行的，但是执行js文件会在所有dom解析完毕后。
多个解析多个script时，js文件会顺序执行。
