前端面试宝典 每日一题（7）谈谈常见的浏览器内核、以及你对浏览器内核的理解？

🧑🏻‍写在前面的话：
这个系列文章可能开始，有人会觉得很low，我是打算从H5先开始整理，最后到常见的前端框架、以及一些前端常见的算法、leetcode的一些算法解析，感兴趣的小伙伴可以持续关注，每天分享一个前端知识点，希望大家一起进步。

谈谈常见的浏览器内核、以及你对浏览器内核的理解？

常见浏览器内核如下：

1. Trident内核：IE,360，傲游，搜狗，世界之窗，腾讯等
2. Gecko内核：MozillaSuite/SeaMonkey
3. Presto内核：Opera7及以上。 [Opera内核原为：Presto，现为：Blink;]
4. Webkit内核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

个人对浏览器内核的理解：

个人觉得浏览器的内核可以分为两大功能

1. 渲染引擎
2. JS执行引擎

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。

JS执行引擎：解析和执行javascript来实现网页的动态效果。最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

渲染引擎是为何工作的？

首先浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree与此同时，进行CSS解析，生成Style Rules。接着将DOM Tree与Style Rules合成为 Render Tree，接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标，随后调用GPU进行绘制Paint），遍历Render Tree的节点，并将元素呈现出来。

JS执行引擎如何工作？

首先引擎会将Javascript代码解析为ATS（抽象语法树），基于AST，解释器（interpreter ）将AST转化为字节码（bytecode），这一步js引擎实际上已经在执行js代码了，为了进一步的优化，优化编译器（optimizing compiler）将热点函数优化编译为机器指令（machine code）执行。

上面的解释可能不够细致，因为我也是一名在不断学习的小白，所以可能对知识的理解还不够深入，所以，如有大佬路过，觉得我哪里理解的不够深刻，可以在评论区讨论，共同进步。