你了解JavaScript的js运行三部曲吗

当浏览器加载一个包含JavaScript代码的网页时，JavaScript代码的执行流程一般会遵循以下三个步骤：

1. 解析代码

浏览器首先会将包含JavaScript代码的网页进行解析，在这个过程中，会对JavaScript代码进行词法分析和语法分析。

• 词法分析：JavaScript代码中包含了各种不同类型的词汇单元，例如关键字、标识符、操作符等等，词法分析的作用就是将代码中的每一个词汇单元都进行分词，并给每个词汇单元打上相应的类型标记。
• 语法分析：语法分析的主要作用就是根据词法分析的结果，将代码转化为语法树，检查代码是否符合语法规范。

2. 创建执行上下文

执行上下文（Execution Context），简称上下文，是JavaScript代码执行时的一个抽象概念。每当JavaScript代码执行时，都会创建一个上下文对象，用于存储代码执行期间的各种信息，例如当前代码的运行状态、变量、函数等等。创建上下文的过程包含了以下几个步骤：

• 创建变量对象：在上下文被创建时，会首先创建一个变量对象（Variable Object），用于存储当前上下文中定义的变量和函数声明。
• 确定this指向：this是JavaScript的一个关键字，它指向当前执行函数的执行上下文，this指向的上下文在调用函数时会动态确定，例如在一个对象方法中，this指向该对象本身。
• 创建作用域链：JavaScript是一门词法作用域的编程语言，作用域链用于解析变量的访问权限，创建作用域链的过程包含了当前上下文嵌套的所有父级上下文。
• 确定外部引用：JavaScript代码中经常会有一些外部的引用，例如闭包、eval等等，确定这些外部引用是关键之一。

3. 执行代码

最后，当上下文创建完成后，就可以执行JavaScript代码了。在执行的过程中，JavaScript引擎会先按照语法树的结构逐条执行语句，期间还会有大量的操作，例如函数调用、读写变量等等。

代码的执行过程受到许多因素的影响，例如函数调用栈、事件循环等等。如果代码中存在异步操作，例如setTimeout、Promise等等，则会被加入到事件队列中，等待当前执行的代码全部完成后再执行。

以下示例展示了一个简单的JavaScript代码，演示了解析、创建上下文以及执行三个步骤：

console.log("Start");

function multiply(a, b) {
  return a * b;
}

const result = multiply(3, 4);

console.log(result);

console.log("End");

输出结果为：

Start
12
End

在执行的过程中，JavaScript引擎执行了以下操作：

1. 解析函数和变量声明，创建上下文对象；
2. 执行console.log("Start"), 输出 "Start"；
3. 执行multiply(3, 4)函数，返回12；
4. 将返回结果赋值给result变量；
5. 执行console.log(result)，输出12；
6. 执行console.log("End"), 输出"End"。

除此之外，由于简单的代码没有进行异步操作，没有涉及到事件队列和事件循环的相关内容。