迴流 與 重繪
之前沒能好好了解迴流與重繪機制以及相應的優化方法，被人問及這方面的知識的時候場面一度很尷尬，回去後讀了下張鑫旭大神的文章，充充電，下面是關於迴流與重繪的收穫。
- 重繪：元素的外觀發生改變，但不影響頁面的佈局。比如一下屬性的改變 visibility，background-color
- 迴流：瀏覽器dom節點，元素的大小，位置發生改變，影響了頁面的佈局。比如我們刪除了一個元素，更改元素的width 頁面產生了改變。
迴流會造成一些相關元素的迴流：
- 子元素
- 該元素後面的其他元素
- 父元素，甚至於祖父級元素
比如一個元素改變寬度， 如果其子元素是浮動的 那麼他的子元素的佈局會隨之改變，
寬度改變也會使同級元素的位置發生改變，以及把父元素撐開
複製程式碼迴流與重繪都會對DOM重新渲染或者改變DOM數的結構所以兩者都對效能有很大的影響,但是迴流比重繪的代價要大
還有一句話是這樣說的： 迴流一定重繪， 重繪不一定迴流
複製程式碼- 那麼都有哪些導致迴流呢？
- 調整頁面大小。
- 改變字型。
- 增加或者移除樣式表。
- 啟用CSS偽類，例如：:hover
- 更改樣式。（包含操作class屬性，設定style屬性）
- 指令碼（JavaScript）操作DOM。
- 計算offsetWidth和offsetHeight屬性。
- 我們應該如何避免迴流？
瀏覽器會在佇列中的操作達到一定數量或者達到一定時間後就會flush佇列，進行一次批處理。
這樣就把多次的重繪與迴流，匯成一次重繪與迴流
複製程式碼除了瀏覽器給我們做的處理外我們自己應該注意哪些。
根據產生的原因我們 避免去做一些操作
- 如果要改變元素的樣式，通過改變樣式名class ，不要直接改變style屬性。
- 避免過多的使用內聯樣式。（因為一個內聯樣式就會造成一次迴流，合成一個外部樣式類，就會一次性的改變所有的樣式，這樣就只會造成一次迴流。）
- 動畫應該作用在絕對定位的元素身上（position為absolute）。（position為absolute的元素時完全脫離標準文件流的，改變這類元素的樣式造成的迴流隻影響他的子元素，將回流的影響減小）。
- 儘量不要使用表格佈局，（沒有定寬的表格單元格的寬度是由最寬的一格決定的，在最後一個沒有載入完之前，寬度是不定的，當最後一行載入完，表格前面的單元格將會重新設定。）
寫在最後
純屬學習記錄，略顯淺薄。 學習的路上.......