瀏覽器迴流和重繪

瀏覽器渲染過程圖：

重上圖可以大致瞭解到瀏覽器渲染文件過程

1.HTML Parser 解析HTML，生成DOM Tree，CSS Parser 解析CSS，生成CSSOM樹

2.結合DOM Tree 和 CSSOM樹，生成Render Tree。

3.根據生成的渲染樹，計算元素節點的幾何資訊，包括位置大小等資訊，此操作對應迴流

4.根據渲染樹和迴流得到資訊，進行頁面渲染的過程，此操作對應重繪。

如果直接對DOM節點進行操作，修改DOM節點的大小、位置等幾何屬性，會導致DOM樹的結構變化，瀏覽器會重新構建DOM樹，這個過程叫做迴流。

如果直接修改DOM的顏色，DOM的結構不會發生變化，頁面佈局也不會改變，瀏覽器不會重新構建DOM樹，但是會重新渲染頁面，這個過程就是重繪的過程。

從上面可以看出，迴流一定會重繪，但是重繪不一定導致迴流。

瀏覽器優化:

 一 儘量減少一下屬性的優化，如果一定要訪問，對它們進行批量操作。

• offsetTop,offsetLeft,offsetWidth,offsetHeight
• scrollTop,scrollLeft,scrollWidth,scrollHeight
• clientTop,clientLeft,clientWidth,clientHeight
• width,height
• getComputedStyle()

二 讓要操作的元素進行”離線處理”，處理完後一起更新

a) 使用DocumentFragment進行快取操作,引發一次迴流和重繪；
b) 使用display:none技術，只引發兩次迴流和重繪；
c) 使用cloneNode(true or false) 和 replaceChild 技術，引發一次迴流和重繪；

三 給元素新增絕對定位，使其脫離文件流再進行操作。