js 回流和重绘

一、什么是回流 重绘？
1.当节点树中的一部分因为元素的规模尺寸，布局，隐藏等改变而需要重新构建，称为回流（重排）
2.当节点数中的一些元素需要更新属性，而这些属性只是影响元素的外观，风格，而不会影响布局的，成为重绘

二、什么时候会造成回流 重绘？
1.回流：
页面初始加载
改变字体，元素尺寸（width，height，border，position），改变元素内容
添加或删除元素，如果元素本身被display:none会回流，visibility:hidden则会发生重绘
定位为fixed的元素，滚动条拖动时会回流
调整窗口大小

2.重绘：

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

三、如何减少回流 重绘
1.使用transform代替top
2.使用visibility代替display:none
3.不要用table
4.不要把节点作为变量放在循环里
回流必定会引发重绘，但重绘不一定引发回流，且回流代价更高
因此如有必要，尽量用重绘代替回流