### 回流 #### 1.什么是回流（重排） ~~~ 1.元素的大小或者显示隐藏受到了修改 2.导致其他DOM的大小或者位置也受到了影响 3.浏览器需要重新计算元素的位置和大小，这个过程叫做回流或重排 ~~~ #### 2.什么是重绘 ~~~ 1.DOM的样式受到了修改，并且没有修改大小，隐藏，只改变了外观，风格，不影响布局 2.浏览器不需要计算大小和位置 ~~~ #### 总结三点： ~~~ 1.重排（回流）：改变了DOM的大小，位置，导致浏览器重新计算了元素的几何和位置 2.重绘：只改变了元素的外观和风格，不影响布局 3.回流必定引起重绘，重绘不一定引起回流 ~~~ #### 怎样会造成重排（回流） ~~~ 1.添加或删除dom 2.元素尺寸改变，margin,padding,width,height,border都会引起回流 3.浏览器窗口尺寸改变，resize事件发生时 4.计算offsetWidth和offsetHeight等dom几何属性时 ~~~ #### 浏览器的渲染队列 1.浏览器渲染队列机制： ~~~ div.style.left = "10px"; div.style.top = "10px"; div.style.width = "20px"; div.style.height = "20px"; ~~~ 以上代码执行了四次，但是浏览器只触发了一次重绘(重排)，因为浏览器存在一个渲染队列机制 2.当每次进行修改后计算该属性，则会导致多次重排(重绘) ~~~ div.style.left = "10px"; console.log(div.offsetLeft); div.style.top = "10px"; console.log(div.offsetTop); div.style.width = "20px"; console.log(div.offsetWidth); div.style.height = "20px"; console.log(div.offsetHeight); ~~~ #### 通过减少回流优化性能 ~~~ 1.尽量减少对dom的添加删除操作 2.发挥浏览器的渲染队列功能，将读写样式分离操作 3.采用文档碎片fragment的形式，在内存中操作dom，操作完成之后再添加到文档中，vue就是这样操作的 ~~~