浏览器内核
不同浏览器的内核组成
-
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解析的时候遇到了JavaScript标签,怎么办?
-
停止解析HTML,加载和执行JavaScript
-
-
问题2:js代码由谁执行?
-
JavaScript引擎
-
认识JavaScript
浏览器内核和JS引擎的关系
V8引擎的原理
-
Parse过程
-
Parse模块:会将JavaScript代码转换成AST,这是因为解释器并不认识JavaScript代码
-
如果函数没有被调用,那么不会被转换成AST的
-
-
通过对JavaScript源代码的进行词法分析、语法分析,生成抽象语法树
-
抽象语法树
-
理解:中转站
-
举例
1、在
bable
将TypeScript转换为JavaScript过程中ts
=> AST => (调整)新的AST => generate code(编译) =>js
代码2、
vue
template => AST =>
createVNode
-
左侧选择JavaScript右侧生成便是对应的抽象语法树
-
-
-
Ignition过程(指向字节码)
-
Ignition:是一个解释器,会将AST转换成
ByteCode
(字节码)-
同时收集
TurboFan
优化所需要的信息(比如函数参数的类型信息,有了类型才能进行真实的运算) -
如果函数只调用一次,Ignition会执行
ByteCode
-
-
问题来了:为什们不将AST 直接转化为CPU可以直接识别的机器码?
首先
js
代码运行的平台不固定,而不同的平台其CPU架构并非统一,对应执行的机器指令不统一,字节码的定义是跨平台的,所以当在不同的平台运行的时候,V8引擎将字节码转化为对应的机器指令,相比于将AST直接转化为机器指令,其效率更高。同时在字节码转换为机器码的过程中回经过一层汇编语言执行对应CPU的指令,从而得到最终的机器码
-
-
TruboFan
过程-
TruboFan是一个编译器,可以将字节码编译为CPU可直接执行的机器码
如果一个函数被多次调用,那么会被标记为热点函数和,经过TruboFan转换成优化的机器码,提高执行性能
-
背景:
字节码在进行转换为机器码的过程中同样需要花费时间,考虑能否将AST直接转换为机器码,同时对于一些仅仅执行一次的函数考虑其分配内存为题,即执行结束释放内存,基于此V8引擎中添加
TruboFan
过程
-
-
Deoptimization
过程-
背景:
机器码实际上也应该能被还原为字节码,因为如果后续执行函数的过程中,类型发生了变化(比如num函数原来执行的是number类型,后来执行变成了string类型),之前优化的机器码并不能 正确处理运算,需要逆向转换成字节码
-
特点
通过这个反向操作的过程一定程度的降低了效率
-
问题来了:如何避免这个过程
函数传参的过程中尽量控制参数的数据类型,会在V8引擎底层转化的过程中效率得到提高,即性能更好
-
结论
TypeScript相对于原生的JavaScript,其参数类型的判断V8引擎的执行更加友好,在一定会程度上运行效率会高一些
-