元素更新属性,属性只影响元素的外观、风格而不影响布局的称之为重绘。
如 color 属性
回流一定会引起重绘,但是重绘不一定引起回流。
会引发页面回流的范例
DOM树发生变化 —— 如:增加一个元素或删除一个元素(元素为可见元素)
通过style控制元素的位置变化 —— 典型的例子是碰壁反弹
元素尺寸的改变 —— 盒模型的每种属性均算在其内
内容改变引发的尺寸变化 —— 如:文本改变或者图片大小改变而引起的计算值宽度和高度改变
浏览器窗口尺寸改变 —— resize事件发生时
所以,想要减少HTML的页面回流和重绘,那就“尽量避免如上内容发生”
资料来源:HTML5学堂(原创技术干货分享)网页链接
问得不错,首先页面回流就是看你的HTML动作多不多,因为HTML至少要回流一次就是页面初始渲染的时候,要减少回流就要减少动态增减html元素(书上是DOM元素),位置,大小,内容,属性之类的改变,还有窗口尺寸的改变(resize),再说白点就是优化你的JS代码。还有就是回流代价比重绘要高,比如在BODY最前面插入一个元素,那么整个BODY内的元素都要回流,在BODY最后插入一个元素,那么就不会影响前面元素的回流。那么如何减少就是减少DOM的操作,和元素的style样式的更改,要操作DOM元素最好利用“离线处理”