页面重绘和重拍版的性能问题.
DOM树和渲染树 当浏览器下载完所有页面HTML 标记,JavaScript,CSS,图片之后,它解析文件并创建两个内部数据结构:一棵DOM树表示页面结构,一棵渲染树表示DOM节点如何显示。 渲染树中为每个需要显示的DOM 树节点存放至少一个节点(隐藏DOM 元素在渲染树中没有对应节点)。渲染树上的节点称为“框”或者“盒”,符合CSS 模型的定义,将页面元素看作一个具有填充、边距、边框和位置的盒。一旦DOM 树和渲染树构造完毕,浏览器就可以显示(绘制)页面上的元素了。 重排版 当DOM 改变影响到元素的几何属性(宽和高)——例如改变了边框宽度或在段落中添加文字,将发生一系列后续动作——浏览器需要重新计算元素的几何属性,而且其他元素的几何属性和位置也会因此改变受到影响。浏览器使渲染树上受到影响的部分失效,然后重构渲染树。这个过程被称作重排版。重排版完成时,浏览器在一个重绘进程中重新绘制屏幕上受影响的部分。 不是所有的DOM 改变都会影响几何属性。例如,改变一个元素的背景颜色不会影响它的宽度或高度。在这种情况下,只需要重绘(不需要重排版),因为元素的布局没有改变。 重绘和重排版是负担很重的操作,可能导致网页应用的用户界面失去相应。所以,十分有必要尽可能减少这类事情的发生。 发生重排版情况 正如前面所提到的,当布局和几何改变时需要重排版。在下述情况中会发生重排版: (1