< p >CSS回流和渲染是網頁開發中常見的術語。在理解它們的含義之前，我們首先需要知道瀏覽器如何渲染網頁。當我們在瀏覽器中輸入一個網址時，該網站的HTML文件將被下載到本地電腦，并在瀏覽器中渲染。要在屏幕上顯示網站時，瀏覽器會執行兩個過程：回流和重繪。

回流：當網頁的布局或元素大小發生變化，瀏覽器必須重新計算和重新繪制整個頁面的過程稱為回流。它是一種特殊的重繪，這意味著瀏覽器需要重新計算元素的位置和大小，以確定元素的新位置。這種計算非常耗費資源，因此是一種性能瓶頸。
重繪：當元素的背景顏色或字體顏色等視覺方面的屬性發生變化時，瀏覽器會執行重繪。這意味著瀏覽器只需重新繪制受影響的元素，而不計算它們的其他樣式屬性。

因此，回流比重繪要昂貴得多，應該盡可能避免。以下是一些可能導致回流的CSS屬性：

· 修改元素的尺寸，位置和/或內容
· 修改窗口大小
· 更改字體
· 更改元素的位置
· 調整邊距和內邊距
· 顯示/隱藏元素
· 更改元素的類名
· 改變元素的子元素

避免回流的方法：

· 盡可能地減少DOM元素的數量
· 在CSS中避免使用表達式
· 避免頻繁地改變元素的樣式
· 將所有常規的CSS屬性都放在class中，并通過JavaScript修改class
· 使用translate（）等transform屬性進行動畫
· 對于復雜的動畫，使用絕對定位或fixed定位元素
· 避免使用table布局
· 避免使用image maps，它們很難被優化

總之，了解回流和重繪對于優化網頁性能至關重要。通過減少DOM元素數量和使用CSS屬性，可以最大限度地避免回流，提高網頁的響應速度和性能。