重绘与重排

一、页面渲染的流程

        解析html绘制DOM树

        解析css绘制CSS树

        把DOM和CSSOM组合生成render tree（渲染树）

        在渲染树的基础上进行布局，计算每个节点的几何结构

        把每个节点绘制到屏幕上（painting）

DOM发生改变的时候触发重排，使DOM重新排列，重绘不一定会重排，但重排一定会发生重绘，重绘和重排都会耗费浏览器的性能，尽量避免。

二、什么是重排和重绘

重绘就是重新绘制（repaint）：是在一个元素的外观被改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

重排就是重新排列（reflow）：当渲染树的一部分必须更新并且节点的尺寸发生了变化，浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。

三、重排

1、引起重排的属性和方法

改变元素几何信息（大小和位置），都会引起，如：

        添加或删除可见的DOM元素

        元素位置改变，或者使用动画

        元素的尺寸改变（外边距、内边距、边框厚度、宽高等几何属性）

        内容改变（例如：文本改变或图片被另一个不同尺寸的图片替代、在input框输入内容）

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

        页面渲染初始化

        设置style属性的值

        计算offsetWidth、offsetHeight、offsetTop和offsetLeft等布局信息

        激活CSS伪类（如 :hover）

        查询某些属性或调用某些方法（如：getComputedStyle()、getBoundingClientRect()）

2、几何属性和布局信息的属性有哪些？

几何属性包括布局、尺寸等可用数学几何衡量的属性：

        布局：display、float、position、list、table、flex、columns、grid

        尺寸：margin、padding、border、width、height

获取布局信息的属性或方法：

        offsetTop、offsetLeft、offsetWidth、offsetHeight

        scrollTop、scrollLeft、scrollWidth、scrollHeight

        clientTop、clientLeft、clientWidth、clientHeight

        getComputedStyle()

        getBoundingClientRect()

四、重绘

引起重绘的属性：

外观属性包括界面、文字等可用状态向量描述的属性，如：

        界面：appearance、outline、background、mask、box-shadow、box-reflect、filter、opacity、clip、border-radius、background-size、visibility

        文字：text、font、word

五、减少重排和重绘

        避免一条一条的修改DOM的样式，可以直接修改DOM的className

        避免把DOM结点的属性值放在一个循环里当成循环里的变量

        给动画的HTML元件使用fixed或absolute的position，那么修改他们的css是不会重排

        避免在大量元素上使用:hover

        分离读写操作

        避免使用Table布局

        避免设置多层内联样式

        避免在布局信息改变时查询布局信息

        当需要对DOM元素进行一系列的操作时，可以先使元素脱离文档流，再对其进行一些列操作，然后再把元素带回文档中

六、使元素脱离文档流的方法：

        隐藏元素，施加修改，重新显示

        使用document fragment在当前DOM之外构建一个子树，再把它拷贝会文档

        将元素元素拷贝到另一个脱离文档的节点中，修改副本，完成后再替换原始元素