由第一节 浏览器简介中我们知道，浏览器有很多种，由不同的商家生产，功能上也有所不同。那么浏览器是如何渲染HTML、CSS、JS成一个漂亮且有用的网页的呢？
如果把浏览器比作一个机器人加工厂，HTML就是零散的零件，CSS就是涂色的的工具，JS就是内置的程序，以便我们使用指令，能让其动起来。
以此类推，开发简单网页，我们只需要掌握HTML即可，如果希望网页有点样式，还需要学习CSS，如果还希望网页能做一些交互或者展示动态的数据等功能，还需要掌握Javascript。也就是：
HTML + CSS + Javascript = 一个好看且有用的网页
也有这样一个比喻：HTML是骨架，CSS是皮肤，JS是骨骼肌肉
那么浏览器这个加工厂，内部又有怎样的构成呢？—— 浏览器内核
浏览器内核简介
浏览器内核分成两部分：渲染引擎和js引擎。由于js引擎越来越独立，内核就倾向于只指渲染引擎。
渲染引擎
渲染引擎其实就是网页浏览器的排版引擎，也被称为样版引擎。它负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。
部分浏览器使用的渲染引擎如下：
- firefox使用gecko引擎（开源：https://developer.mozilla.org/zh-CN/docs/Mozilla/Gecko）
- IE使用Trident引擎(微软已停止维护，IE时代已终结)
- 2015年微软推出自己新的浏览器，原名叫斯巴达，后改名edge,使用edge引擎
- opera最早使用Presto引擎，后来弃用，跟随谷歌使用的引擎
- chrome\safari\opera使用webkit引擎（开源：https://webkit.org/）
- 13年chrome和opera开始使用Blink引擎（基于webkit发展）
更多渲染殷勤可参考：https://baike.baidu.com/item/%E6%8E%92%E7%89%88%E5%BC%95%E6%93%8E/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
了解了浏览器的工作原理，在遇到问题时，才能更好的分析问题所在，以至于之后能做出更好的优化。
关于我
- 一个推崇全栈开发的前端开发人员
- 公众号：全栈道
- 个人网站：https://www.iotzzh.com
- B站：https://space.bilibili.com/285025688
- 抖音：全栈道
- github：https://github.com/iotzzh
- gitee: https://gitee.com/iotzzh
