瀏覽器的渲染過程：

1、瀏覽器解析HTML原始碼，然後建立一個DOM樹。在DOM樹中，每一個HTML標籤都會有一個對應的節點，並且每一個文字也都會有一個文字節點。

2、瀏覽器解析CSS程式碼，計算出最終的樣式資料。對CSS程式碼中的非法資料會直接忽視，優先順序定義為：瀏覽器預設設定，使用者設定，外鏈樣式，內聯樣式，HTML中的Style。

3、構建DOM樹，並計算出樣式資料後，下一步就是構建渲染樹。DOM樹和渲染樹相似，但是有區別，DOM樹完全和HTML標籤對應，但是在渲染樹中會忽略不需要渲染的元素。

4、渲染樹建立好了之後，瀏覽器就可以根據渲染樹將頁面繪製到螢幕之上。

迴流和重繪：

1、迴流：瀏覽器要花時間去渲染，當它發現某個部分發生了變化影響佈局，那就需要倒回去重新渲染。

2、重繪：如果只是改變了某個元素的背景顏色，文字顏色登，不影響元素周圍或者內部元素佈局的屬性，就只會引起瀏覽器重新畫某一部分，而不是全部重新繪製。

       因為迴流是倒回去重新渲染，所以迴流比重繪更花費時間，也就更加影響效能。所以在書寫HTML程式碼時候儘量避免過多的迴流。

迴流的原因：

(1)、頁面初始化的時候

(2)、操作DOM的時候

(3)、某些元素的尺寸改變了

(4)、如果CSS的屬性發生了變化

減少迴流和重繪：

(1)、不要一條條的修改DOM屬性，可以預先定義好CSS的Class，然後修改DOM的ClassName；

(2)、不要把DOM節點的屬性值當成迴圈的變數；

(3)、為動畫的HTML原件使用Flexd或者absolute的position，那麼修改他們的CSS不會產生迴流；

(4)、儘量不要使用Table佈局，因為很小的改動會造成整個Table的重新佈局。