浏览器原理
认识浏览器的内核
不同的浏览器有不同的内核组成:
- 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)或样版引擎。
⭐浏览器渲染过程
- 通过HTML Parser将html生成DOM树(可能包含js操作DOM)
- 通过CSS Parser生成style/css规则
- DOM树附加css规则结合成render树(渲染树)
- 通过Layout布局引擎对render树操作生成最终的渲染树
- 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执行原理(便于理解,不够严谨)
-
代码被解析,v8引擎内部会帮助我们创建一个对象(GlobalObject --> go)
- 预解析变量默认值为undefine,函数默认值为存储函数空间地址
- 预解析变量默认值为undefine,函数默认值为存储函数空间地址
-
运行代码
- v8为了执行代码,v8引擎内部会有一个执行上下文栈(Exection Context Stock. ECStack)(函数调用栈)
- 因为我们执行的是全局的代码,为了全局代码能够正常运行,需要创建全局执行上下文(Global Execution Context)(全局代码需要被执行时才会创建),其中VO指向GO
- 执行代码,如果有变量赋值,则在GO重改变值
-
执行函数
- 调用栈内添加函数执行上下文(FEC),其中VO指向AO
- AO的内容类似GO的过程,预解析
- 然后赋值
-
作用域链 = 当前作用域 + 父作用域(谁创建谁为父)
练习
https://blog.csdn.net/hahalalalalalala/article/details/107386666.
https://blog.csdn.net/m0_63851202/article/details/121462485.