引入JS的两种方式：
①嵌入代码：在HTML中使用（可以有多个代码块）
②引入外部文件：下载、解析、执行（从上往下）
问题？
①：为什么元素获取不到？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="index1.js"></script>
</head>
<body>
<div id="div1"></div>
</body>
</html>js代码部分：（获取到div1所对应的元素）
var div1 = document.getElementById("div1");
console.log(div1);控制台结果：（显示null：即没有获取到元素。）
原因：HTML从上往下执行，按顺序，所以先下载、解析、执行了<script>外部文件。而位于后面的div元素还没有被解析，所以没有获取到 div元素。
解决方案：将<script src="index1.js"></script>写到body元素中的最后。
②：为什么页面显示那么慢？（解决方法同问题①）
原因：需花时间来下载、解析、执行js脚本，需花更多时间等待效果，用户体验感差。
阻塞加载：表示应该立即下载脚本，阻塞页面中的其他操作。（以上不对js做任何处理的就是阻塞加载）
延迟加载（defer）：表示脚本可以延迟到文档完全被解析和显示之后再执行。
<script defer src="index1.js"></script>异步加载（async）：表示应该立即下载脚本，但不应妨碍页面中的其他操作。（影响部分文档）
<script async src="index1.js"></script>示意图：（绿色为js文件下载解析、执行）延迟加载和异步加载时又开了一个线程，并发执行
总结：
延迟加载：1、并发
2、多个js，按定义的顺序执行
3、在文档解析完，才执行（HTML）
4、在DOMContentLoaded事件之间执行完
5、只支持外部引入方式（IE7以前的除外）
异步加载：1、并发
2、多个js,不一定按顺序执行
3、加载完就执行，在load事件之前（JS）
4、在load事件之前执行完
5、只支持外部引入方式
2162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
