一、页面渲染的流程
解析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之外构建一个子树，再把它拷贝会文档
将元素元素拷贝到另一个脱离文档的节点中，修改副本，完成后再替换原始元素
