简述浏览器渲染

前端设计工程师重在设计网站，只有了解了浏览器的渲染方式，才能在发现问题的同时更好的定位，便于网站的优化。

浏览器工作的大致流程

如图：

image.png

根据上图，简单的分析一下：
1、浏览器会解析三个东西：

a. HTML/SVG/XHTML，Webkit有三个C++的类对应这三类文档，解析这三种文件会产生一个DOM Tree。
b. CSS 解析CSS会产生CSS Rule Tree。
c. JavaScript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree。

2、解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。

a. Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
b. CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
c. 然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。

3、最后通过调用操作系统Native GUI的API绘制。

渲染

流程：

1. 计算CSS样式
2. 构建Render Tree
3. Layout-定位坐标和大小，是否换行，或者其他属性
4. 绘画

Reflow和Repaint

当JS修改了CSS属性，或者手动修改的CSS属性导致layout时，涉及到两个概念，Reflow和Repaint。

Repaint：屏幕的一部分要重画，比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
Reflow：意味着元件的几何尺寸变了，我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，所以，如果某元件的几何尺寸发生了变化，需要重新布局，也就叫reflow）reflow 会从这个root frame开始递归往下，依次计算所有的结点几何尺寸和位置，在reflow过程中，可能会增加一些frame，比如一个文本字符串必需被包装起来。

显然，Reflow的成本比Repaint的成本要高得多。下面列举一些高成本的动作：

a. 当增加、删除、修改DOM结点时，会导致Reflow或Repaint
b. 当移动DOM的位置，或是搞个动画的时候。
c. 当修改CSS样式的时候。
d. 当Resize窗口的时候（移动端没有这个问题），或是滚动的时候。
e. 当修改网页的默认字体时。

基本上，Reflow的原因如下：

a. Initial。网页初始化的时候。
b. Incremental。一些Javascript在操作DOM Tree时。
c. Resize。其些元件的尺寸变了。
d. StyleChange。如果CSS的属性发生变化了。
e. Dirty。几个Incremental的reflow发生在同一个frame的子树上。

尽量减少Reflow的操作：

a. 不要一条一条地修改DOM的样式。与其这样，还不如预先定义好css的class，然后修改DOM的className。
b. 把DOM离线后修改。
c. 不要把DOM结点的属性值放在一个循环里当成循环里的变量。
d. 尽可能的修改层级比较低的DOM。
e. 为动画的HTML元件使用fixed或absoult的position
f. 千万不要使用table布局。