学一学css的重排和重绘

一、HTML渲染页面过程

1. 浏览器获取到html代码解析成DOM树：html中每一个tag都是DOM中的一个子节点，根节点就是document对象。DOM树里包含了所有的html标签，包括display:none隐藏的标签、js动态添加的元素等
2. 浏览器整理样式：首先解析所有样式（用户自定义的和用户代理的），解析成样式结构体，再解析的过程中会去掉浏览器不能识别的样式，比如ie去掉-moz开头的样式，firefox去掉-ms开头的样式等
3. DOM树 + 样式结构体 组合成 render树：render树类似DOM树，但区别很大；render树可以识别样式，每一个node中都有自己的style，而且render树不包含隐藏的节点比如display:none的节点、head节点，因为这些节点不会呈现也不影响其他node的呈现，所以不被包含；但是visibility:hidden会被包含。根据css2的标准，render树中的每一个节点都被成为Box，理解页面元素为一个具有填充、边距、边框和位置的盒子
4. Painting ：浏览器根据render树绘制页面

二、回流和重绘

回流：当render树中因为元素的大小、定位布局、隐藏等发生改变而需要重新构建的，称为回流reflow；每个页面至少需要回流一次，就是在页面第一次加载的时候，在回流的时候，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树，完成回流之后，再重新绘制

重绘：当render树中因为元素的一些属性发生更改比如**color、background-color等只影响元素的外观风格而不是影响布局时**需要重新绘制，称为重绘

回流必会引起重绘，重绘不一定会引起回流

引起回流

• 添加或者删除可见的DOM元素
• 元素位置改变
• 元素尺寸改变-边距、填充、边框、宽度、高度
• 内容改变-比如文本的改变或者图片大小的改变引起计算值宽高度的变化
• 页面渲染初始化
• 浏览器窗口大小的改变-比如resize事件发生

引起重绘

• 元素背景颜色改变
• 元素字体颜色改变
• 元素边框颜色等改变

三、优化（减少回流和重绘）

1. 合并多次DOM和样式修改
2. 尽量不要使用table布局：因为某一元素的变化可能使整个table回流
3. 将需要多次重排回流的元素设置position为absoluted或者fixed，因为脱离了文档流，变化不会引发回流
4. 动画的实现也最好使用absoluted或者fixed定位

css 页面重绘和回流(重排)以及优化