开发者学堂课程【Node.js 入门与实战：浏览器渲染引擎工作原理】学习笔记，与课程紧密联系，让用户快速学习知识
课程地址：https://developer.aliyun.com/learning/course/588/detail/8237
浏览器渲染引擎工作原理
目录
一、 工作原理
二、 浏览器渲染引擎工作原理图
一、工作原理
1. 解析HTML构建Dom树(Document Object Model，文档对象模型)，DON是W3C组织推荐的处理可扩展置标语言的标准编程接口。
2. 构建*渲染树*，*渲染树*并不等同于*Dom树*，因为像’head’标签或’display: none'这样的元素就没有必要放到*渲染树*中了，但是它们在*Dom树*中。
3. 对*渲染树*进行布局，定位坐标和大小、确定是否换行、确定position、overflow、z-index等等，这个过程叫`"layout”或"reflow"`。
4. 绘制*渲染树*，调用操作系统底层API进行绘图操作。
浏览器内核的工作原理，首先思考：当浏览器打开一个网页的时候，首先呈现的网页是整个内容呀，那么这个内容是怎么呈现出来呢？
首先浏览器要呈现一个网页内容，是不是这个网页中得有HTML代码和CSS呢？
所以渲染引擎就是用来解析执行这些东西的。当一篇HTML文档过来以后，它首先根据HTML文件解析生成一个Dom树，这个Dom树里面包含了HTML里面所有的标签，那么当解析生成Dom树以后，同时渲染引擎会把这个页面上的所有CSS再解析生成一个CSS规则树。CSS就是一个一个的规则，就是什么样的选择器，里面就是什么样的样式，这就是一个规则。
会把这个网页中所有CSS解析生成一个CSS规则树，现在是有一个DOM树和一个CSS树了，然后把它俩合并到一块，最后就生成一个渲染树。
那么这个渲染树和刚才生成Dom树有区别吗？是有区别的。
Dom树是HTML中所有的标签都会相应的生成一个Dom对象在这个Dom树上，但是这个渲染树里面并不是所有的标签都在渲染树里面，哪些标签没有呢？
这些凡是不需要显示的标签都从渲染树里面剔除了，比如HTML标签里面的html标签、head标签、那些所有display：none标签、meta这样的标签。这些标签都不显示，剔除这些所有不需要显示的标签，剩下的就是渲染树里面有的对象。然后接下来再对渲染树里面的所有内容做一次重新定位、设置大小等，做完这个操作以后，接下来就可以把这个页面中的内容渲染绘制出来。
口述有点抽象，接下来看一幅图。
二、浏览器渲染引擎工作原理图
渲染引擎工作原理示意图：
首先第一步Parsing HTML to construct the DOM tree是解析HTML构建一个Dom树，然后构建Render tree construction渲染树，渲染树和Dom树的区别就是渲染树里面剔除了所有不需要显示的标签，然后接下来做了一个Layout of the refer tree操作，对渲染树做了一个布局，这个布局的意思就是设置里面所有标签的大小、定位等。
当这一切都做完以后，最后就可以调用操作系统底层的api，把这个网页绘制出来，绘制完毕后就能看到这个网页了。
所以这个就是浏览器的渲染引擎，或者叫浏览器内核的工作的一个大致原理：
第一解析Dom树，第二根据Dom树生成渲染树，第三对渲染树里面所有的标签进行layout操作，就是布局设置大小等，第四把最终结果绘制一下就可以了，这是这么一个大致的工作原理。
WebKit工作原理（Chrome、Safari、）：
接下来看Webkit内核，Chrome、Safari、Opera在使用Webkit引擎，都是用的Webkit内核。
看一下Webkit内核的工作的原理：
首先是解析HTML，生成一个Dom树，与此同时它解析所有页面中的CSS，生成一个CSS Style Rules，即CSS规则树，然后把这个Dom树和CSS规则树一结合最后生成一个渲染树。
对这个渲染树里面内容进行一次Layout布局操作，设置它的大小、定位等等，布局完毕以后，接下来直接调用操作系统api进行绘制，绘制完毕以后，就可以看到这个网页了，这就是Webkit渲染引擎对网页执行的一个操作。
Gecko工作原理：
接下来来看另外一个火狐浏览器，Firefox这个浏览器的内核Gecko，这个内核对于网页的渲染的过程。
首先也是拿到一个HTML网页，然后对HTML网页中所有内容进行解析，解析生成的是Content Sink内容槽，接下来这个内容槽里面又分了两支：一支是给它生成了一个Content Model内容模型，其实就是Dom树；另一支是解析CSS，也是生产一个CSS规则树。然后还是把Dom树和规则树合并生成了Frame Constructor。
而这个不叫做渲染树，叫做帧。这个帧其实和渲染树是一样的，只不过换了一个名词而已。然后接下来对生成的帧也做一个Reflow操作，Reflow操作其实就类似于Layout操作，只不过是名词不一样，然后做完对Reflow、Layout操作以后，接下来又是调用操作系统api进行绘制，最后绘制完毕，就看到结果了。
以上就是主流的这两大渲染引擎步骤原理，这里没有IE的Trident，因为IE浏览器内核是不开源的，所以是完全看不到的，但是大致原理应该都差不多。
浏览器的渲染引擎的一个基本工作原理就是这样的，所以以后再看浏览器的时候就能知道这个HTML，CSS是怎么来解析、来显示的，也就是刚才所讲解的这种方式来显示的。
