概览

  • 1.JavaScript从编译到执行过程分四步：
  • 2.在上下文创建以后，并不会立即执行JS代码，而是会先进行一个预编译的过程。
  • 3.预编译分为两种：面试题中的函数提升相关代码题原理。
  • 4.浏览器线程：
  • 5.同步与异步执行顺序：
  • 6.Event Loop执行过程：


1.JavaScript从编译到执行过程分四步：

  • 1-1.词法分析：将字符流转换为记号流，就像英文句子一个个单词独立翻译。
  • 1-2.语法分析：js引擎判断检查你的代码是否存在语法错误，得到语法树。
  • 1-3.预编译：js引擎会在解释javaScript代码之前对其进行编译，编译阶段中的一部分工作就是找到所有的声明，并用适合的作用域将它们关联起来。
  • 1-4.解释执行：从上到下逐行解析代码

2.在上下文创建以后，并不会立即执行JS代码，而是会先进行一个预编译的过程。

  • 2-1.预编译只管变量、形参、函数等，并不会处理return、if等代码逻辑判断。

3.预编译分为两种：面试题中的函数提升相关代码题原理。

  • 3-1.全局的预编译：
  • ①页面加载完成时执行。
  • ②分3个步骤：
  • α：创建GO对象（Global Object）全局对象。
  • β：找变量声明，将变量名作为GO属性名，值为undefined。
  • γ：查找函数声明，函数名作为GO属性，值赋予函数体。
  • 3-2.函数的预编译：
  • ①函数执行前执行。
  • ②分四步：
  • α：创建AO对象（Activation Object）执行期上下文。
  • β：找形参和变量声明，将变量和形参名作为AO属性名，值为undefined。
  • γ：将实参值和形参统一。(将实参值赋值给形参)。
  • δ：在函数体里面找函数声明，函数名作为AO属性名，值赋予函数体。

4.浏览器线程：

  • 4-1.GUI渲染线程：
  • 4-2.JS引擎线程：
  • 4-3.事件触发线程：
  • 4-4.定时器触发线程：
  • 4-5.HTTP请求线程：
  • 4-6.Event Loop事件循环处理线程：

5.同步与异步执行顺序：

  • 5-1.所有同步任务都在主线程上执行，形成一个执行栈 (Execution Context Stack)。异步任务首先到Event Table进行回调函数注册。
  • 5-2.当异步任务的触发条件满足，将回调函数从Event Table压入Event Queue中。
  • 5-3.主线程里面的同步任务执行完毕，系统会去Event Queue中读取异步的回调函数。
  • 5-4.只要主线程空了，就会去Event Queue读取回调函数，这个过程被称为Event Loop。

6.Event Loop执行过程：

  • 6-1.代码开始执行，创建一个全局调用栈，script作为宏任务执行。
  • 6-2.执行过程过同步任务立即执行，异步任务根据异步任务类型分别注册到微任务队列和宏任务队列。
  • ①Promise（then、catch、finally）、Async/Await、MutationObserver、Process.nextTick属于微任务。
  • 6-3.同步任务执行完毕，查看微任务队列。
  • ①若存在微任务，将微任务队列全部执行(包括执行微任务过程中产生的新微任务)。
  • ②若无微任务，查看宏任务队列，执行第一个宏任务，宏任务执行完毕，查看微任务队列，重复上述操作，直至宏任务队列为空。