页面的重绘与回流,以及如何优化
浏览器对页面的呈现流程
页面呈现流程
浏览器把取到的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)