重绘和回流

浏览器渲染的过程主要包括以下五步：
1、浏览器将获取的HTML文档解析成DOM树
2、将处理CSS标记，构成层叠样式表模型CSSOM(CSS Object Model)
3、将

回流：当render tree(渲染树)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，这就称为回流（reflow）。
常见的回流的操作
1、页面初次渲染
2、更改浏览器尺寸（window）大小
3、修改元素的尺寸
4、部分dom操作
重绘是当节点需要更改外观而不会影响布局的操作，比如改变 color 就叫称为重绘
常见的重绘的操作：
1.改变元素的背景色或字体颜色

2触发页面回流的属性
1、盒子模型相关属性会触发重布局
2、定位属性及浮动也会触发重布局
3、改变节点内部文字结构也会触发重布局

width height
margin padding
display
border
top bottom left right
position
float
clear
text-align
overflow
font-weight font-family font-size
line-height
vertival-align
white-space

2.只触发重绘的属性

color
border-style border-radius
visibility
text-decoration
background background-image background-position background-size
outline outline-color outline-style outline-width
box-shadow

如何减少重绘（Repaint）和回流（reflow）
1、用 translate 替代 top 改变
2、用 opacity 替代 visibility
3、不要一条条的修改 DOM 的样式，预先定义好 class，然后修改 DOM 的className
4、为动画的 HTML 元件使用 fixed 或 absoult 的 position ,那么修改他们的 css 是不会 reflow 的
5、不要把 DOM 节点的属性值放在一个循环里当循环里的变量
6、不要使用 table 布局，可能很小的改动会造成整个 table 的重新布局
7、不要在布局信息改变的时候做查询（会导致渲染队列强制刷新）