浏览器如何完成网页渲染？

渲染流程

（1）把HTML代码形成文档对象模型DOM

（2）加载并解析样式文件，形成CSS对象模型

（3）在DOM和CSS对象模型基础上，把可见元素组织成一棵渲染树，树上的每一个渲染对象都是对应的DOM对象及其计算过的样式，渲染树就是一个DOM的直观展现，这个过程可以理解为定义每个对象的样子

（4）对渲染树上的每个对象计算坐标，这个过程可以理解为定义每个对象的位置

（5）渲染树上的元素最终展示在浏览器里，这一过程称为“painting”

重绘 Repaint

当改变那些不会影响元素在网页中的位置的元素样式时，譬如background-color(背景色)， border-color(边框色)， visibility(可见性)，浏览器只会用新的样式将元素重绘一次

重排 Reflow

发现以下动作时，浏览器会进行重排：

（1）DOM元素添加、删除、修改，或者元素顺序的改变

（2）内容变化，包括表单域内的文本改变

（3）CSS属性的改变

（4）添加或删除样式表

（5）更改“类”的属性

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

（7）伪类激活（悬停）

重绘重排优化

在页面开发中，很难避免对DOM的操作，为了降低浏览器重绘重排的性能消耗，应该记住一个基本原则：

尽量少的触发重绘重排

代码示例：

var $body = $('body');

$body.css('padding', '1px'); // 重绘重排

$body.css('color', 'red'); // 重绘

$body.css('margin', '2px'); // 重绘重排

这三个操作连在一起，浏览器会缓存这些改变，在代码运行完毕后再将这些改变经一次通过加以应用，实际上浏览器只进行一次重绘重排操作

下面的代码就是错误操作的示例

var $body = $('body');

$body.css('padding', '1px');

$body.css('padding'); // 这个读属性的操作，会使浏览器强制执行之前的重绘重排操作

$body.css('color', 'red');

$body.css('margin', '2px');