关于javascript的执行顺序简单测试
程序员文章站
2022-07-15 15:54:26
...
原始代码及效果
<!DOCTYPE html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
</body>
</html>在<head>里面添加<script>脚本，将会先执行js脚本，阻塞后面的页面加载。
<!doctype html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
background-color: lightblue;
}
</style>
<script>
alert("hello world");
</script>
</head>
<body>
</body>
</html>在<head>里面添加外部js脚本，依旧会先执行js脚本，阻塞后面的页面加载。
<!doctype html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
background-color: lightblue;
}
</style>
<script src="1-7-test-js.js"></script>
</head>
<body>
</body>
</html>给<script>加上async属性，进行异步加载。
（注意：async属性只对外部脚本有效。）
<!doctype html>
<html lang="zh-cmn-hans">
<head>
<meta charset="UTF-8">
<title>test</title>
<style>
body {
background-color: lightblue;
}
</style>
<script src="1-7-test-js.js" async="async"></script>
</head>
<body>
</body>
</html>页面加载的过程中，遇到<script>会立即解析，完成后才会继续向下进行，因此需要注意的是：
1.需要异步加载js脚本，需要给<script>加上async属性（必须是外部脚本才有效）。
2.要在页面加载完成后执行的js脚本，最好放在</body>之前，这样可以加快页面加载速度。
3.如果js脚本需要操作DOM节点，脚本放在需要操作的DOM节点之前，则会出现错误。
参考文章：
https://coolshell.cn/articles/9749.html
https://juejin.im/post/59e85eebf265da430d571f89
推荐阅读
-
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
-
关于静态语句块、非静态语句块，成员变量初始化、构造方法在父子类执行的顺序：
-
关于java中三种初始化块的执行顺序
-
浅谈个人对客户端JavaScript同步、异步、执行顺序等概念的理解
-
实例详解JavaScript中setTimeout函数的执行顺序
-
JavaScript代码执行的先后顺序问题
-
JavaScript的解析机制和执行顺序介绍
-
关于javascript的执行顺序简单测试
-
【jQuery】关于 jQuery 和 JavaScript 两个入口函数的执行顺序问题
-
JavaScript 的顺序执行 执行机制