浅谈JavaScript 的执行顺序

网络编程 2024/11/14 佚名

3 2 1

虽然现代浏览器可以并行的下载JavaScript（部分浏览器），但考虑到JavaScript的依赖关系，他们的执行依然是按照引入顺序进行的。

本文章记录本人在学习 JavaScript 中看书理解到的一些东西，加深记忆和并且整理记录下来，方便之后的复习。

在 html 文档中的执行顺序

js代码执行顺序比较的形象，用户可以直观的感受这种执行顺序。但是，js代码的执行顺序是比较复杂的。有时候我们会把js代码写在html里面，而html文档在浏览器中解析的过程是这样：浏览器按照文档流从上到下逐步解析页面结构和信息。js代码作为嵌入的脚本也算做html文档的组成部分，因此，js代码在装载时的执行顺序也是根据脚本标签<script>的出现来顺序来决定。（下面一个栗子）

<!DOCTYPE html>
<script>
  console.log("顶部脚本");
</script>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script>
    console.log("头部脚本");
  </script>
</head>
<body>
  <script>
    console.log("页面脚本");
  </script>
</body>
</html>
<script>
  console.log("底部脚本");
</script>

还有对于通过脚本标签<script>的src属性导入的外部js文件脚本，它也将按照其语句出现的顺序来执行，而且执行过程是文档装载的一部分，不会因为是外部js文件而延期执行。

// 先加载 b.js 并且执行里面的代码
<script src="/UploadFiles/2021-04-02/b.js">

预编译
当js引擎解析的时候，它会在预编译对所有声明的变量和函数进行处理。
变量提升


console.log(a); // undefined
var a = 1;
console.log(a); // 1



预解析函数


f(); // 1
function f() {
  console.log(1);
};



详细：javascript变量声明提升(hoisting)
分块执行代码
js是按块执行代码的，所谓代码块就是使用<script>标签分隔的代码段。（下面一个栗子）


<script>
  // 代码段1
  var a = 1;
</script>
<script>
  // 代码段2
  function f() {
    console.log(1);
  };
</script>



因为js是按代码块来执行的。浏览器在解析html文档流的时候，如果遇到一个<script>标签，则js会等到这个代码块都加载完之后再对代码进行预编译，然后在执行。执行完毕后，浏览器会继续解析西门的html文档流，同时js也准备好处理下一个代码块。
有个小坑，由于js是按块执行的，因此在一个js块中调用后面块声明的变量或者函数就会提示语法错误。但是不同块都属于一个全局作用域，也就是说，块之间的变量和函数是可以共享的。（下面一个栗子）


<script>
  // 代码段1
  console.log(a);
  f();
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>



由于js是按块处理代码，同时又遵循html文档流的解析顺序，因此在上面的栗子中会看到语法错误。但是，在文档流加载完毕后再次访问就不会出现这种错误了。（下面一个栗子）


<script>
  window.onload = function(){ // 页面初始化事件处理函数
    // 代码段1
    console.log(a);
    f();
  }
</script>
<script>
  // 代码段2
  var a = 1;
  function f() {
    console.log(1);
  };
</script>



还有为了安全起见，一般在页面初始化完毕之后才允许js代码执行，这样就可以避免一些网速对js执行的影响。同时，也避开了html文档流对js执行的限制。
综上所述，javascript在执行时的步骤是：


1、先读入第一段代码块


2、对代码块进行语法分析，如果出现语法错误，直接执行第5步骤


3、对var变量和function定义的函数进行“预编译处理”（赋值式函数是不会进行预编译处理的）


4、执行代码块，有错则报错


5、如果还有下一段代码块，则读入下一段代码块，重复步骤2


6、结束

JavaScript,执行顺序

标签：

JavaScript,执行顺序

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“浅谈JavaScript 的执行顺序”

浅谈JavaScript 的执行顺序

暂无“浅谈JavaScript 的执行顺序”评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新动态

2024年11月14日

浅谈JavaScript 的执行顺序

JavaScript,执行顺序

jQuery使用animate创建动画用法实例

javascript封装 Cookie 应用接口

评论“浅谈JavaScript 的执行顺序”

P70系列延期，华为新旗舰将在下月发布

更新动态

友情链接