关于HTML文档的执行顺序
先贴一点代码
test.js
console.log('====================================');
console.log(document.getElementById('box'));
console.log('====================================');
index.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" />
<script src="./test.js"></script>
<title>Document</title>
</head>
<body>
<div id="box">box</div>
</body>
</html>
首先，浏览器在执行我们的HTML文档的时候都是一行一行去执行的,那么上面的代码js打印box会输出什么呢？
答案是 null,因为我们执行到那里的JS的时候，文档还没有加载完成！那么如果我们此时给我们的 script 标签加上async或者defer的话！再来看看！
<script src="./test.js" async></script>
OR
<script src="./test.js" defer></script>
然后你就能发现，2个都可以完成我们期待的效果！
defer和async的区别
defer是等全部都HTML加载完成才会执行，async加载脚本执行是和HTML并行的
没有
defer或async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该script标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。
有
async，加载和渲染后续文档元素的过程将和script.js的加载与执行并行进行（js的加载执行和HTML解析执行同时进行）。
有
defer，加载后续文档元素的过程将和script.js的加载并行进行（同时解析，但没有执行），但是script.js的执行要在所有元素解析完成之后，DOMContentLoaded事件触发之前完成（整个HTML解析完成才会执行！）。 DOMContentLoaded_event
默认
async
defer
defer之间一定是按照顺序执行，async的执行是谁先加载完谁执行！
三个js
console.log('====================================');
console.log(0000);
console.log('====================================');
console.log('====================================');
console.log(1111);
console.log('====================================');
console.log('====================================');
console.log(2222);
console.log('====================================');
先测试async加载三个js
<!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" />
<script src="./test.js" async></script>
<script src="./test1.js" async></script>
<script src="./test2.js" async></script>
<title>Document</title>
</head>
<body>
<div id="box">box</div>
</body>
</html>
可以看到，有几次顺序会乱掉！
大家可以自己去试试defer！反正我的一都是按照顺序执行输出！
<!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" />
<script src="./test.js" defer></script>
<script src="./test1.js" defer></script>
<script src="./test2.js" defer></script>
<title>Document</title>
</head>
<body>
<div id="box">box</div>
</body>
</html>
评论区