页面重绘(repaint)和回流(reflow)

本文转载于:猿2048网站页面重绘(repaint)和回流(reflow)

前言

页面显示到浏览器上的过程：

1.一、生成一个DOM树。

浏览器将获取到的HTML代码解析成1个DOM树，包含了全部标签，包括display:none和动态添加的节点。

1.二、生成样式结构体。

浏览器将全部样式解析成样式结构体，解析过程当中会去掉浏览器不能识别的。

二、DOM树和样式结构体结合生成render树。

render树相似于DOM树，render树每一个节点有本身样式（盒子模型，margin、border、padding、content），但不包含display:none和head节点，却包含visibility:hidden节点。

三、浏览器根据render树渲染页面。

重绘(repaint)和回流(reflow)

回流：当render tree中的一部分(或所有)由于元素的尺寸，布局，隐藏等改变而须要从新构建，就是回流。回流后会进行重绘。

重绘：当只是元素的外观，风格变化，不影响布局的，从新渲染的过程就叫重绘。

PS：这样重绘的代价会比回流小。

何时出现回流？

一、页面渲染初始化

二、添加、删除可见的DOM元素

三、元素尺寸、位置变化

四、窗口resize

浏览器对回流、重绘优化

浏览器都会优化重绘和回流的操做。浏览器会把全部会引发回流、重绘的操做放入1个队列中，等队列中的操做到了必定的数量或者到了必定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让屡次的回流、重绘变成一次回流重绘。

另外，当咱们取一些属性值时，相似offsetWidth、clientWidth、width等，会致使浏览器提早flush队列，只为了取到正确的值，即使是队列里的操做不影响所取的值。

减小回流、重绘

一、修改样式和添加DOM元素时，批量处理。

二、取offsetWidth等属性值，缓存到变量，少去取值。

三、将元素脱离文档流。

PS：第3点我并未查找到相关证据，持保留态度。

总结

如今写前端代码的，大多很为所欲为，还通常都不出问题，由于一旦糟糕到程序异常，一般也就醒悟了。