首先，我们回顾一下网页渲染时，浏览器的动作：
1.根据来自服务器端的 HTML 代码形成文档对象模型（DOM）
2.加载并解析样式，形成 CSS 对象模型。
3.在文档对象模型和 CSS 对象模型之上，创建一棵由一组待生成渲染的对象组成的渲染树（在 Webkit 中这些对象被称为渲染器或渲染对象，而在 Gecko 中称之为“frame”。）渲染树反映了文档对象模型的结构，但是不包含诸如 <head> 标签或含有display:none属性的不可见元素。在渲染树中，每一段文本字符串都表现为独立的渲染器。每一个渲染对象都包含与之对应的 DOM 对象，或者文本块，还加上计算过的样式。换言之，渲染树是一个文档对象模型的直观展示。
4.对渲染树上的每个元素，计算它的坐标，称之为布局。浏览器采用一种流方法，布局一个元素只需通过一次，但是表格元素需要通过多次。
5.最后，渲染树上的元素最终展示在浏览器里，这一过程称为“painting”。
当用户与网页交互，或者脚本程序改动修改网页时，前文提到的一些操作将会重复执行，因为网页的内在结构已经发生了改变。
重绘
当改变那些不会影响元素在网页中的位置的元素样式时，譬如 background-color (背景色)， border-color (边框色)， visibility (可见性)，浏览器只会用新的样式将元素重绘一次(这就是重绘，或者说重新构造样式)。
重排
当改变影响到文本内容或结构，或者元素位置时，重排或者说重新布局就会发生。这些改变通常由以下事件触发：
DOM 操作（元素添加，删除，修改，或者元素顺序的改变）;
内容变化，包括表单域内的文本改变;
CSS 属性的计算或改变;
添加或删除样式表;
更改“类”的属性;
浏览器窗口的操作（缩放，滚动）;
伪类激活（：悬停）。
浏览器如何优化渲染？
浏览器尽可能将重绘/重构 限制在被改变元素的区域内。比如，对于位置固定或绝对的元素，其大小改变只影响元素本身及其子元素，然而，静态定位元素的大小改变会触发后续所有元素的重流。
另一种优化技巧是，在运行几段 JavaScript 代码时，浏览器会缓存这些改变，在代码运行完毕后再将这些改变经一次通过加以应用。
网友评论