js执行原理

浏览器原理

认识浏览器的内核

不同的浏览器有不同的内核组成：

• Gecko：早期被Netscape和Mozilla Firefox浏览器使用；
• Trident：微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；
• Webkit：苹果基于KHTML开发、开源的，用于Safari，Google Chrome之前也在使用；
• Blink：是Webkit的一个分支，Google开发，目前应用于Google Chrome、Edge、Opera等；
• 等等
  事实上，浏览器内核指的是浏览器的排版引擎：
• 排版引擎(layout engine)，也称为浏览器引擎(browser engine)、页面渲染引擎（rendering engine)或样版引擎。

⭐浏览器渲染过程

1. 通过HTML Parser将html生成DOM树（可能包含js操作DOM）
2. 通过CSS Parser生成style/css规则
3. DOM树附加css规则结合成render树(渲染树)
4. 通过Layout布局引擎对render树操作生成最终的渲染树
5. Painting绘制展示

PS：HTML解析的时候遇到了JavaScript标签，会停止解析HTML，而去加载和执行JavaScript代码

JavaScript引擎

为什么需要JavaScript引擎？

• 高级的编程语言都是需要转成最终的机器指令来执行的；
• 事实上我们编写的JavaScript无论你交给浏览器或者Node执行，最后都是需要被CPU执行的；
• 但是CPU只认识自己的指令集，实际上是机器语言，才能被CPU所执行：
• 所以我们需要JavaScript引擎帮助我们将JavaScript代码翻译成CPU指令来执行；

比较常见的JavaScript引擎有哪些呢？

• SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发（也就是JavaScript作者）；
• Chakra： 微软开发，用于IT浏览器；
• JavaScriptCore:：WebKit中的JavaScript引擎，Apple公司开发；
• VB：Google开发的强大JavaScript引擎，也帮助Chrome从众多浏览器中脱顾而出；
• 等等

V8引擎的架构

V8引擎本身的源码非常复杂，大概有超过100w行C++代码，通过了解它的架构，我们可以知道它是如何对JavaScript执行的：

• Parse模块会将JavaScript代码转换成AST(抽象语法树)，这是因为解释器并不直接认识JavaScript代码;
  • 如果函数没有被调用，那么是不会被转换成AST的；
• Ignition是一个解释器，会将AST转换成ByteCode(字节码）
  • 同时会收集TurboFan优化所需要的信息（比如函数参数的类型信息，有了类型才能进行真实的运算）；
  • 如果函数只调用一次，Ignition会执行解释执行ByteCode;
• TurboFan是一个编译器，可以将字节码编译为CPU可以直接执行的机器码;
  • 如果一个函数被多次调用，那么就会被标记为热点函数，那么就会经过TurboFan转换成优化的机器码，提高代码的执行性能；
  • 但是，机器码实际上也会被还原为ByteCode,这是因为如果后续执行函数的过程中，类型发生了变化（比如sum函数原来执行的是number类型，后来执行变成了string类型），之前优化的机器码并不能正确的处理运算，就会逆向的转换成字节码

V8执行的细节

• Blink将源码交给V8引擎，Stream获取到源码并且进行编码转换；
• Scanner会进行词法分析（lexical analysis),词法分析会将代码转换成tokens;
• 接下来tokens会被转换成AST树，经过Parser和PreParser:
  • Parser就是直接将tokens转成AST树架构；
  • PreParser称之为预解析，为什么需要预解析呢？
    • 这是因为并不是所有的JavaScript代码，在一开始时就会被执行。那么对所有的JavaScript代码进行解析，必然会影响网页的运行效率；
    • 所以V8引擎就实现了Lazy Parsing(延迟解析）的方案，它的作用是将不必要的函数进行预解析，也就是只解析时需要的内容，而对函数的全量解析是在函数被调用时才会进行；
    • 比如我们在一个函数outer内部定义了另外一个函数inner,那么inner函数就会进行预解析；

js执行原理(便于理解，不够严谨)

1. 代码被解析,v8引擎内部会帮助我们创建一个对象(GlobalObject --> go)

   • 预解析变量默认值为undefine，函数默认值为存储函数空间地址
     

2. 运行代码

   • v8为了执行代码,v8引擎内部会有一个执行上下文栈(Exection Context Stock. ECStack)(函数调用栈)
   • 因为我们执行的是全局的代码,为了全局代码能够正常运行,需要创建全局执行上下文(Global Execution Context)(全局代码需要被执行时才会创建)，其中VO指向GO
   • 执行代码，如果有变量赋值，则在GO重改变值
     

3. 执行函数

   • 调用栈内添加函数执行上下文(FEC)，其中VO指向AO
   • AO的内容类似GO的过程，预解析
   • 然后赋值
     

4. 作用域链 = 当前作用域 + 父作用域(谁创建谁为父)
   

练习

https://blog.csdn.net/hahalalalalalala/article/details/107386666.
https://blog.csdn.net/m0_63851202/article/details/121462485.