浏览器渲染过程以及浏览器内核与JS引擎的关系

浏览器渲染过程

1. 在浏览器输入域名(例如：baidu.com)，经过dns服务器的解析（dns：专门用来做域名解析的服务器），找到对应的IP地址，然后会返回一个html文件；
2. 开始解析html文件，遇到 link 和 script 标签时，暂停解析，会从服务器下载对应的css和javascript文件；
3. 浏览器内核帮助解析css和javascript文件，由js引擎执行javascript代码；
4. HTML由HTML Parser进行解析，构成DOM Tree；Styles样式由CSS Parser解析，生成对应的样式规则；两者附加到一起生成Render Tree（渲染树）；
5. Layout是布局引擎，当浏览器放大或者缩小时，布局引擎会重新进行布局，生成最终的Render Tree，然后进行绘制(Painting)，最终展示出来(Display)。

浏览器内核

也叫浏览器的排版引擎，也称为浏览器引擎、页面渲染引擎 或 样版引擎。常见的浏览器内核有：

1. Gecko：早期被Netscape和Mozilla FireFox浏览器使用；
2. Trident：微软开发，被IE4~IE11浏览器使用，但是Edge浏览器已经转向Blink；
3. WebKit：苹果基于KHTML开发，开源的，用于safari，Google Chrome之前也在用；
4. Blink：是WebKit的一个分支，Google 开发，目前应用于Google Chrome，Edge，Opera等。

JavaScript引擎

也叫JS引擎，为什么需要JS引擎呢？

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

常见的JS引擎：

1. SpiderMonkey：第一款JavaScript引擎，由Brendan Eich开发，也就是JavaScript的作者；
2. Chakra：微软开发，用于IE浏览器；
3. JavaScriptCore：WebKit中的JS引擎,Apple公司开发；
4. V8：Google开发的强大JS引擎，也帮助Chrome从众多浏览器中脱颖而出；

浏览器内核和JS引擎的关系

浏览器内核可以分成两部分：渲染引擎 和 JS引擎。
以WebKit为例，WebKit事实上由两部分组成：

• WebCore（渲染引擎）：负责Html解析、布局、渲染登相关工作；
• JavaScriptCore（JS引擎）：解析、执行JavaScript代码；

V8引擎的原理

JavaScript被Parser解析后，变成AST抽象语法树，经过Ignition转化树，将AST转为字节码，再由V8引擎将字节码转化成CPU需要的机器指令，进行执行。
TurboFan可以从Ignition搜集一些执行频率比较高的函数，把它们标记成hot函数，直接生成MachineCode(优化的机器码)，当下次碰到同样的函数时，直接执行MachineCode就行；但是当执行MachineCode时，发现执行操作不一样了(例如下面代码sum(‘aaa’, ‘bbb’))，这时就会反向操作把机器码再转化成字节码，继续执行。

function sum(num1,num2){
	return num1 + num2;
}
sum(10,10);
sum(20,20);
sum('aaa', 'bbb');