最终决定浏览器表现出来的页面效果差异的是：**渲染引擎**，也就是浏览器内核。浏览器内核负责解析网页语法（如HTML、JS）并渲染，展示页面。相同的代码在不同的浏览器中页面效果有差异，这很有可能是不同的浏览器内核造成的。
浏览器内核主要分成两部分：渲染引擎和JS引擎
最开始渲染引擎和JS引擎没有区分的很明确，后来内核就倾向于只指渲染引擎。
渲染引擎：负责取得页面的内容（HTML、XML、IMG等）、整理讯息（如加入CSS），以及计算网页的显示方式，然后输出至显示器。
JS引擎：解析和执行javascript来实现网页的动态效果。
常见的浏览器内核有：
1、Trident内核：IE\ 360 \ 搜狗浏览器等
2、Webkit内核：Safari \ Chrome等
3、Gecko内核：Netscape6及以上版本 \ Firefox \ SeaMonkey等
4、Presto内核：Opera7及以上版本
加载页面时浏览器的具体工作流程：
1、解析HTML以重建DOM树：渲染引擎开始解析HTML文档，转换树中的标签到DOM节点；
2、构建渲染树：解析CSS，根据CSS选择器计算出节点的样式，创建渲染树；
3、布局渲染树：从根节点递归调用，计算每一个元素的大小、位置等，给出每个节点应该出现在屏幕上的精确坐标；
4、绘制渲染树：在屏幕上画出每个节点；
DOM Tree：浏览器将HTML解析成树形的数据结构。
CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
Render Tree: DOM和CSSOM合并后生成Render Tree。
如下图是DOM树、CSSOM、render树的关系：