頁面優化---Reflow()迴流Repaint()重繪

菜菜菜鳥日記—Reflow()迴流與Repaint()重繪

一.什麼是Reflow(),Repaint()

1. Reflow()
   指瀏覽器為了重新渲染部分或者全部的檔案而重新計算檔案中元素的位置和幾何構造的過程。每個頁面至少需要一次迴流，在頁面第一次載入的時候。根據HTML渲染過程，迴流一定會引起重繪，而重繪不一定會引起迴流，因此迴流的開銷較大，會影響頁面效能。
2. Repaint()
   如果只是改變某個元素的background-color、color、outline等只是影響元素的外觀樣式，不會影響它周圍或內部佈局。將只會引起瀏覽器 repaint（重繪）。repaint 的速度明顯快於 reflow。

二.如何提高頁面效能
因為Reflow()迴流造成的開銷較大，要提高頁面效能，避免reflow的開銷成為頁面優化的重要途經。首先要了解哪些頁面操作會引起頁面迴流。
三.引起Reflow()迴流的操作

1. 對DOM節點進行增刪移動。
2. 改變視窗或頁面文字大小時。
3. 啟用偽類時，如:hover。
   …