### 回流 #### 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就是這樣操作的 ~~~