1. 浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。

2. 将CSS解析成 CSS Rule Tree 。

3. 根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。

4. 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。

5. 再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。

简单点说的基本过程

1．解析HTML文件，创建DOM树

2．解析CSS,形成CSS对象模型

3．将CSS与DOM合并，构建渲染树（renderingtree）

4．布局和绘制

注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。

CSS被视为阻塞渲染的资源，应放到代码的头部尽快加载。同步的JavaScript会暂停DOMTree的构建，应放到代码的尾部最后加载，或者使用async/defer属性异步加载JavaScript。重排和重绘会给浏览器渲染线程造成很大的负担，尽量减少重排和重绘的触发次数。

Repaint(重绘)

重绘是改变不影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器会根据元素的新属性重新绘制一次(这就是重绘，或者说重新构造样式)，使元素呈现新的外观。重绘不会带来重新布局，所以并不一定伴随重排。

Reflow（重排）

渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程称为布局或重排。

当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。这些改变通常由以下事件触发：

     DOM操作（元素添加、删除、修改或者元素顺序的改变）；

  内容变化，包括表单域内的文本改变；

     CSS属性的计算或改变；

  添加或删除样式表；

  更改“类”的属性；

  浏览器窗口的操作（缩放，滚动）；

  伪类激活（悬停）。

"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。

但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。

浏览器如何优化渲染？

（1）将多次改变样式属性的操作合并成一次操作

（2）将需要多次重排的元素，position属性设为absolute或fixed，

这样此元素就脱离了文档流，它的变化不会影响到其他元素。例如有动画效果的元素就最好设置为绝对定位。

（3）由于display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。

如果要对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。

看这个的时候又想到display:none、visibility:hidden和overflow:hidden的区别，顺便带一下。

display:none和visibility:hidden都是把网页上某个元素隐藏起来的功能

display:none:

隐藏元素，不占网页中的任何空间，让这个元素彻底消失（看不见也摸不着）,由于会影响到网页的空间，所以会引起一次重排和重绘。

visibility:hidden:

他是把那个层隐藏了，也就是你看不到它的内容但是它内容所占据的空间还是存在的。（看不见但摸得到），该操作不会对页面有影响，所以只会引起一次重绘。

overflow:hidden:

让超出的元素隐藏（不占据网页空间），就是在设置该属性的时候他会根据你设置的宽高把多余的那部分剪掉，会引起一次重排和重绘