display none 与visibility none的区别 及css的重绘和回流

display none 与visibility none区别
共同点：都是控制元素的显示与隐藏
不同点：display隐藏不会占据空间， visibility会留出空间

css的重绘和回流（重排）（重绘不一定需要重排，重排必然会导致重）
1 解析html，生成DOM树 解析css 生成CSSOM树
2 DOM树与CSSOM树结合，生成渲染树 Render树
3 根据渲染树进行回流， 确定元素的几何信息(位置，大小)
4 然后在进行重绘， 得到元素的像素（css）
5 将像素发送给GPU，展示在页面上

overflow：hidden （固定宽高），会导致重绘
visibility none 会占据位置，位置不变 会导致重绘
opacity： 0 也会消失， 但是会占据位置， 会导致重绘
display：none，空间位置也会消失， 会导致重排

如何避免重排呢
1.使用transform代替top、left，因为使用transform页面不会出现回流现象
2.不要使用table来进行布局，因为一个小改动就会导致整个table的重新布局
3.不要逐条变更DOM的样式，应封装在一个style对象中赋值给DOM的样式属性
4.避免频繁操作DOM，创建一个documentFragment，在他上面应用所有DOM操作，最后再把他添加到文档中