目录
一、script 代码块的默认加载和执行顺序：
从上到下依次边加载边解释执行。如果设计到了引入外部的js代码，那么该代码必须加载完成并解释执行完毕之后才能继续解析后面的HTML 和 js代码。
默认加载执行的顺序的问题：
如果加载的外部的js代码比较大，而且是网络js代码，可能会引起页面的假死状态。
一般的解决方案：
（1）将这些js代码放到 body 的末尾。
（2）给script标签添加async属性。让该引入的外部的js代码，实现异步加载。
(3) 给script标签添加 defer 属性。让该引入的外部的js代码，实现延迟加载。
二、 js的 async 异步加载介绍：
1：必须针对使用引入外部的js代码，该属性才能生效。
2: 如果给引用外部js代码的script添加了 async，那么该引入的js的执行特点如下：
（1）js代码的加载和后续的HTML内容是并行加载的。
（2）如果js代码先加载完了，HTML还没有加载完毕，会暂停HTML的解析。执行js代码，然后再解析。
注意：使用 async 属性的 script代码，各个script代码之间不应该存在上下的依赖关系，因为这些 async 的script代码加载完毕的顺序是不可控的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/test1.js" async></script>
</head>
<body>
<script src="js/test2.js" async></script>
<script>
console.log ("test");//先执行
</script>
</body>
</html>三、js的 defer 延迟加载介绍：
1：必须针对使用引入外部的js代码，该属性才能生效。
2：所有使用了defer 属性的 script 的加载顺序是固定的。
3：延迟加载。所有的 defer 的script 和 后续的HTML 内容可以实现并行加载。
4：如果defer属性的script 代码加载完毕，需要等待HTML解析完毕之后才能执行js代码
5：如果defer 和 async 同时使用，那么 async 的优先级高于defer的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/test1.js" defer>第二个执行</script>
</head>
<body>
<script src="js/test2.js" defer>最后执行</script>
<script>
console.log ("test");//先执行
</script>
</body>
</html>
764
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
