html 載入時發生了什麼？

在頁面載入時，瀏覽器把獲取到的HTML程式碼解析成一個DOM樹，DOM樹裡包含了所有HTML標籤，包括display:none隱藏，還有用JS動態新增的元素等。

瀏覽器把所有樣式(使用者定義的CSS和使用者代理)解析成樣式結構體DOM Tree 和樣式結構體組合後構建渲染樹（render tree）， 渲染樹類似於文件物件模型數（DOM Tree），但區別很大，因為渲染樹能識別樣式，渲染樹中每個節點(node)都有自己的style，而且render tree不包含隱藏的節點(比如display:none的節點，還有head節點)，因為這些節點不會用於呈現，而且不會影響呈現的，所以就不會包含到 render tree中。我自己簡單的理解就是DOM Tree和我們寫的CSS結合在一起之後，渲染出了render tree。

什麼是迴流（重排）？

當render tree中的一部分(或全部)因為元素的規模尺寸，佈局，隱藏等改變而需要重新構建。這就稱為迴流(reflow)也叫重排。每個頁面至少需要一次迴流，就是在頁面第一次載入的時候，這時候是一定會發生迴流的，因為要構建render tree。在迴流的時候，瀏覽器會使渲染樹中受到影響的部分失效，並重新構造這部分渲染樹，完成迴流後，瀏覽器會重新繪製受影響的部分到螢幕中，該過程成為重繪。

什麼是重繪？

當render tree中的一些元素需要更新屬性，而這些屬性只是影響元素的外觀，風格，而不會影響佈局的，比如background-color。則就叫稱為重繪。

迴流（重排）和重繪的區別？

他們的區別很大：
迴流必將引起重繪，而重繪不一定會引起迴流。比如：只有顏色改變的時候就只會發生重繪而不會引起迴流
當頁面佈局和幾何屬性改變時就需要回流
比如：新增或者刪除可見的DOM元素，元素位置改變，元素尺寸改變——邊距、填充、邊框、寬度和高度，內容改變

擴充套件：

瀏覽器的幫忙
所以我們能得知迴流比重繪的代價要更高，迴流的花銷跟render tree有多少節點需要重新構建有關係。

因為這些機制的存在，所以瀏覽器會幫助我們優化這些操作，瀏覽器會維護1個佇列，把所有會引起迴流、重繪的操作放入這個佇列，等佇列中的操作到了一定的數量或者到了一定的時間間隔，瀏覽器就會flush佇列，進行一個批處理。這樣就會讓多次的迴流、重繪變成一次迴流重繪。

優化

我們可以改變一些寫法減少迴流和重繪

比如改變樣式的時候，不去改變他們每個的樣式，而是直接改變className 就要用到cssText 但是要注意有一個問題，會把原有的cssText清掉，比如原來的style中有’display:none;’，那麼執行完上面的JS後，display就被刪掉了。
為了解決這個問題，可以採用cssText累加的方法，但是IE不支援累加，前面添一個分號可以解決。
還有新增節點的時候比如要新增一個div裡面有三個子元素p，如果新增div再在裡面新增三次p，這樣就觸發很多次迴流和重繪，我們可以用cloneNode(true or false) 來避免，一次把要新增的都克隆好再appened就好了，還有其他很多的方法就不一一說了