页面的重绘与回流，以及如何优化

页面的重绘与回流，以及如何优化

浏览器对页面的呈现流程

页面呈现流程

浏览器把取到的HTML代码解析成1个DOM树

HTML中的每个tag都是DOM中的1个节点

根节点是document对象

DOM树里包含了所有HTML标签

包括display:none;隐藏（因为DOM tree无法识别样式），还有用JS动态添加的元素等

浏览器把所有样式解析成样式结构体，解析过程中会去掉浏览器不能识别的样式(例如：IE会去掉-moz开头的样式)

DOM tree和样式结构体组合构建render tree

render tree类似于DOM tree

render tree能识别样式，render tree中的每个节点都有自己的style

render tree不包含隐藏的节点（例如：display:none;的节点和head节点）

页面加载时，不会呈现且不会影响呈现的节点不会包含到render tree中

visibility:hidden;会影响布局(layout)，会占有空间

浏览器根据构建好的render tree来绘制页面

回流与重绘

1、概述

当render tree中的一部分(或全部)，因为元素的规模尺寸、布局、隐藏等改变而需要重新构建，这就是回流(reflow)

每个页面至少回流一次，即页面首次加载

回流时，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树

回流完成后，浏览器会重新绘制受影响的部分，是重绘过程

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不影响布局(例如：background-color)，则称为重绘(repaints)

回流必将引起重绘，重绘不一定引起回流

回流比重绘的代价更高

2、回流何时发生

当页面布局和几何属性改变时就需要回流

添加或者删除可见的DOM元素

元素改变位置和计算offsetWidth和offsetHeight属性

元素尺寸改变–边距、填充、边框和宽高

内容改变（例如：文本改变、图片大小改变而引起的计算值宽度和高度改变，input框中输入文字）

页面渲染初始化

浏览器窗口尺寸改变–resize事件发生时

增加或移出样式表

操作class属性

改变字体

激活伪类（例如：hover）