JS高级学习笔记（3）之 script标签
作者：互联网
写在前面
作为前端小白，在开发过程中，h5页面中加载js脚本，一般我们直接<script src="./index.js"></script>就加载完成了；最近在啃《JS高级》（P11）的时候，读到<script>标签的时候，发现它有俩个属性：defer和async；今天就来总结一下。
script标签
1.async：异步加载（不让页面等待该脚本的加载执行，异步加载页面的其他部分）
2.charset：设置js的字符集编码
3.defer：延迟脚本（当浏览器解析到/html 结束标签时才执行，该属性对嵌入脚本无效）
4.src：要执行的外部代码文件
5.type：与language类似可以看作是language的替代属性
一、不写defer和async属性
这里我就先说说我对页面加载的理解：
1.html页面加载时，至上而下加载，解析完整的html结构
2.当遇到外联的CSS和JS的时候，会停止对DOM的加载，转而加载外联的CSS和JS
3.当CSS、JS加载完成时，它会立即执行（所以一般JS都写在body的最下面）
4.CSS和JS执行完成后，构造HTML DOM模型 // DOMContentLoaded执行点
5.加载图片等外部文件
6.页面加载完毕 //load
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="./01.js"></script> <!-- console.log('这是外部脚本01.js'); -->
<script src="./02.js"></script> <!-- console.log('这是外部脚本02.js'); -->
</head>
<body>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
console.log("domContentLoad执行");
}, false);
console.log("这里是嵌入脚本");
</script>
</body>
</html>
执行结果：
二、defer-延迟脚本
加上defer就变成延迟脚本，当加载到包含defer的JS脚本时，浏览器会开启一个新线程并马上下载JS文件，但是不会执行里面的代码；需要等到加载到</html>时，浏览器才会执行这两个JS脚本，这两个JS脚本时顺序执行的，先执行example1.js，后执行example2.js。
包含defer的JS文件，会在DOMContentLoaded事件和loaded事件之前执行。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script defer src="./01.js"></script> <!-- console.log('这是外部脚本01.js'); -->
<script defer src="./02.js"></script> <!-- console.log('这是外部脚本02.js'); -->
</head>
<body>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
console.log("domContentLoad执行");
}, false);
console.log("这里是嵌入脚本");
</script>
</body>
</html>
执行结果
三、async-异步脚本
此时是的JS时异步脚本，当浏览器加载到这两个JS脚本时，浏览器开启新线程下载这俩个JS脚本，下载的时候浏览器主线程还在加载中；当加载JS脚本完成时，这俩个脚本会马上执行，此时主线程停止工作，这俩个JS脚本执行乱序，先执行example1.js，后执行example2.js还是先执行example2.js，后执行example1.js是不确定；当执行完这两个JS文件后，浏览器的主线程才会继续执行。
包含async的JS文件，会在Loaded事件之前执行，在DOMContentLoaded事件的前后不一定。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script async src="./01.js"></script> <!-- console.log('这是外部脚本01.js'); -->
<script async src="./02.js"></script> <!-- console.log('这是外部脚本02.js'); -->
</head>
<body>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { //添加DOMContentLoaded事件
console.log("domContentLoad执行");
}, false);
console.log("这里是嵌入脚本");
</script>
</body>
</html>
执行结果：
总结
我就直接拿过来用了~~
标签：脚本,script,标签,js,JS,DOMContentLoaded,执行,加载 来源： https://www.cnblogs.com/houfee/p/9686572.html