《图解HTML》第二节 浏览器的工作原理简介

由第一节 浏览器简介中我们知道，浏览器有很多种，由不同的商家生产，功能上也有所不同。那么浏览器是如何渲染HTML、CSS、JS成一个漂亮且有用的网页的呢？

这就全靠于浏览器内核啦~

浏览器内核简介

浏览器内核分成两部分：渲染引擎和js引擎。由于js引擎越来越独立，内核就倾向于只指渲染引擎。

浏览器内核

渲染引擎

渲染引擎其实就是网页浏览器的排版引擎，也被称为样版引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。

部分浏览器使用的渲染引擎：

• firefox使用gecko引擎（开源：https://developer.mozilla.org/zh-CN/docs/Mozilla/Gecko）
• IE使用Trident引擎
• 2015年微软推出自己新的浏览器，原名叫斯巴达，后改名edge,使用edge引擎
• opera最早使用Presto引擎，后来弃用，跟随谷歌使用的引擎
• chrome\safari\opera使用webkit引擎（开源：https://webkit.org/）
• 13年chrome和opera开始使用Blink引擎（基于webkit发展）

更多渲染殷勤可参考：https://baike.baidu.com/item/排版引擎/8371898?fromtitle=gecko&fromid=7348782

渲染引擎工作流程

• HTML解析器解析DOM树（解析为DOM树上个节点，同时解析CSS样式）
• 渲染树结构（具有一定的视觉效果，并按照一定顺序排列在屏幕上）
• 布局渲染树（为每个节点分配固定坐标）
• 绘制DOM树（渲染引擎会遍历所有的节点，由UI后端绘制）

webkit工作流程

gechko工作流程

JavaScript引擎

部分浏览器使用的JavaScript引擎：
JavaScript引擎是一个专门处理JavaScript脚本的虚拟机，一般会附带在网页浏览器之中。

• 老版本IE使用Jscript引擎
• IE9之后使用Chakra引擎
• edge浏览器仍然使用Chakra引擎
• firefox使用monkey系列引擎
• safari使用的SquirrelFish系列引擎
• Opera使用Carakan引擎
• chrome使用V8引擎(开源)。nodeJs其实就是封装了V8引擎

浏览器引入JS的渲染过程

图片来源于：https://zhuanlan.zhihu.com/p/27628685