瀏覽器渲染的迴流和重繪

瀏覽器渲染html頁面的流程基本上分爲四步：

一、計算CSS樣式
二、構建Render Tree
三、Layout 定位座標和大小
四、正式開始渲染

那麼，首先要提出兩個重要概念，一個是Relfow，一個是Repaint。

重繪：當咱們對DOM的修改致使了樣式變化，也就是說DOM的CSS樣式發生改變，可是幾何屬性並無改變，好比只是修改了DOM的顏色、背景色時，瀏覽器不須要從新計算元素的幾何屬性，直接爲該元素繪製新的樣式。

迴流：當咱們對DOM的修改改變了DOM的幾何尺寸，好比修改了元素的寬、高或隱藏元素等，那麼瀏覽器須要從新計算元素的幾何屬性；由於該元素相鄰元素的幾何屬性和位置都會受到影響。而後再將計算的結果從新繪製出來，這個過程稱爲迴流。

咱們知道，網頁生成的時候，至少會渲染一次。刷新和回退都會不斷的從新渲染，每次的從新渲染必然會引起迴流+重繪，有時候只是重繪。

迴流必然引起重繪，可是重繪則不必定會引發迴流。

若是重回和迴流在設置節點時頻發出現，那麼很大程度上影響頁面的性能。迴流所需的成本比重繪高的多，改變父節點裏的子節點，會致使父節點的一系列迴流。

常見引發迴流的屬性和方法

一、添加或者刪除可見的DOM元素；

二、元素尺寸的改變，margin、padding、border、width、height

三、內容變化，好比用戶在input框中輸入文字

四、瀏覽器窗口尺寸的改變——resize事件發生時

五、計算offsetWidth 或者offsetLeft屬性

六、設置style的屬性值

常見引發重繪的屬性和方法

color、border-style、visibility、background、background-image、background-size、background-position、background-repeat、border-radius、box-shadow、outline、outline-color、outline-style、outline-width

如何減小回流、重繪

使用transform代替top、使用visibility代替display：none，由於前者會引發重繪然後者會引發迴流。

不要把DOM節點做爲循環變量使用。

不要使用table佈局，table基本都是迴流。

動畫實現的速度越快，迴流次數越多。

CSS選擇符從右向左匹配查找，避免節點層級過多。