javascript在浏览器中的执行过程？

[xccjk]

浏览器是如何执行JavaScript代码的

编译过程

• 解析
  • 词法分析
    • 将JavaScript代码解析为一个个的令牌
    • 令牌类型
      • 关键字 - Keyword
      • 标识符 - Identifier
      • 符号 - Punctuator
      • 字符串 - String
  • 语法分析
    • 将令牌组装成一颗抽象的语法树
• 解释
  • JavaScript引擎的解释器Lgnition将AST转换为字节码
• 优化
  • 解释器会将重复的操作进行优化，生成分析数据，然后将字节码+分析数据传给编译器TurboFan

语法分析过程

输入的代码

  var name = 'xcc'
  console.log(name)

语法分析

  // 令牌
  Keyword(var)
  Identifier(name)
  Punctuator(=)
  String('xcc')
  Identifier(console)
  Punctuator(.)
  Identifier(log)
  Punctuator(()
  Identifier(name)
  Punctuator())

---

内存管理

栈

特点

• 先进后出的规则
• 临时性的存储空间，主要用来存储局部变量和函数调用
• 基本数据类型String,Number,Undefined,Null,BigInt,Symbol,Boolean直接在栈中创建，而复杂数据类型会存储在堆中，栈中存储的是堆的引用地址
• 全局变量以及闭包变量也是存储的引用地址
  • 闭包的变量不会销毁

栈的查看方式

• console.trace()
• 浏览器控制台的Source下的Call Stack

---

堆

特点

• 存储大的数据结构
• 分为5个区域
  • 代码区 - Code Space
  • Map区 - Map Space
  • 大对象区 - Large Object Space
  • 新生代 - New Space
  • 老生代 - Old Space
• 回收算法
  • 标记清除
  • 标记整理
  • V8内存一分为二，小空间用于存储新生代对象(32M|16M)用于回收存活时间比较短的对象，回收过程采用复制算法+标记整理算法，新生代内存区分为二个大小空间，使用空间为From，空间时间为To，活动对象的存储于From空间，标记整理后将活动对象拷贝到To，交换空间后完成释放