代码
html
<html>
<head>
<meta charset="UTF-8" />
<script src="./js/vue@2.6.14.min.js"></script>
<script src="./js/https.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
console.log('页面脚本');
new Vue({
el: "#app",
created() {
console.log('vue');
}
})
</script>
</html>
http.js
console.log("http.js 脚本");
document.onreadystatechange = () => {
console.log("readyStateChange 事件");
};
window.onload = () => {
console.log("window.load 事件");
};
(function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "./js/hello.js";
var html = document.querySelector("head");
html.appendChild(script);
})();
hello.js
console.log("hello.js 脚本");
运行结果
结果分析
- 由上到下的顺序执行script标签内的脚本
- 执行页面中的脚本
- 触发readyStateChange事件
- 再执行标签脚本中加载的脚本
- 再次触发readyStateChange事件
- 最后触发window.load事件