JS引擎笔记

JS引擎 #

1. 解释执行JS
   1. 编译阶段
      1. 通过词法分析tokenize和语法分析parse生成AST，ignition再生成字节码
      2. 生成变量环境和词法环境，全局执行上下文
         1. 变量环境，进行声明变量、声明函数提升
            1. 问题1：同名覆盖，不易察觉
            2. 问题2: 提升变量没有被及时销毁
         2. 词法环境，词法块作用域变量（let, const）
            1. let, const放在这里，解决变量提升的问题
         3. 代码区存放字节码
   2. 执行阶段
      1. ignition逐条解释执行AST
         1. 全局执行上下文入执行栈底
         2. 一行一行执行代码区代码
         3. 遇到函数，将函数执行上下文压入栈
            1. Outter，引用全局上下文环境
            2. this，引用函数自身
            3. 执行函数代码区代码
         4. 执行完函数，对应上下文出站
         5. 整个过程形成调用栈
      2. 执行多次的热点代码通过turbofan编译器JIT编译成机器码，热点代码可以直接执行，提升执行效率
2. 事件循环如下图
   1. 内存结构
      1. 栈
         1. 函数调用会在stack上生产frame，frame就是函数的执行上下文
      2. 堆
         1. object对象
   2. 消息队列（浏览器会把相同类型的放到一个队列）https://juejin.cn/post/7186557347215441981
      1. 微任务队列，优先级最高
      2. 交互事件队列，优先级高
      3. 延迟事件队列，优先级低
      4. 合成页面队列,
      5. 默认队列,
      6. idle队列（垃圾回收任务），优先级最低
      7. 不同场景下（加载阶段、交互阶段、idle阶段），优先级由浏览器动态调整

JS引擎原理 #

1. tokenize -》AST-> bytecode
   1. 基于寄存器的字节码，实现寄存器操作，解释执行
   2. 基于栈的字节码，op操作栈，解释执行
   3. 基于AST直接深度优先遍历直接计算
2. 解释执行
   1. 基于while switch 和 dispatch实现
   2. 基于goto 跳转 next branch
3. 推荐JS实践
   1. keep same type, don’t delete property
   2. write js as if it has type
   3. lazy parse by using function

参考 #

1. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop