之前头条面试被问到，虽然不是岗位相关的，但是还是想作为常识了解下。这里对这部分内容进行一个记录、梳理和总结。

· 首先说一下什么是浏览器渲染引擎。浏览器渲染引擎是渲染出浏览器展示的内容的。默认请情况下，浏览器渲染引擎可以显

示 HTML、XML文档以及图片。如果需要显示别的内容，比如现在浏览器都可以直接打开PDF文件，这些功能不是浏览器原生

的，是在浏览器中安装了PDF阅读器的插件做到显示PDF文件的。本文主要总结渲染引擎最主要的用途——显示应用了CSS之

后的html及图片。

目前主流的浏览器Chrome和Firefox都是基于两种渲染引擎构建的。Firefox使用Geoko（Mozilla自主研发的渲染引擎），

Chrome使用的是Webkit。

渲染主流程

·首先获得请求的文档内容，以8K分块方式完成。

·解析HTML构建DOM树-->构建Render树-->布局Render树-->绘制Render树

注：

1.DOM树：浏览器将HTML解析成树形的数据结构

2.CSS Rule 树：浏览器将CSS解析成树形的数据结构

3.Render 树：将CSSOM和DOM合并成Render树

4.Layout：有了Render 树以后，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及从属关系，从而计算出每个

节点在屏幕中的位置

5.Painting：根基算出来的规则，通过显卡把内容画在屏幕上

6.Reflow(回流)：浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染。Reflow会从HTML的root frame开始

往下递归，依次计算各个几何点的尺寸和位置（Reflow几乎无法避免）。界面上树状目录的折叠和展开（元素的显示和隐

藏）等，都会引起Reflow。鼠标滑过、点击等行为引起了页面上某些元素的变化，都会引起整个页面重新渲染。浏览器会

Reflow哪些代码，是无法估计的，一般都是相互影响的

7.Repaint（重绘）：改变某元素的背景色、边框颜色等不影响它周围的或内部布局的属性，屏幕的一部分要重画，但是元素

的集合尺寸没有发生改变。

8.有些时候，一次元素发生改变并不会立马Reflow或者Repaint而是会将改变化积累到一定的量在发生变化

Geoko渲染流程图

Geoko和Webkit的渲染细节的区别可以参考 www.cnblogs.com/slly/p/6640… 这篇博客