什麼是迴流？

• 當一個元素自身的寬高，佈局，顯示或隱藏，或元素內部的文字結構發生變化，導致需要重新構建頁面的時候，就產生了迴流

什麼是重繪？

• 當一個元素自身的寬高，佈局，及顯示或隱藏沒有改變，而只是改變了元素的外觀風格的時候，就產生了重繪

什麼時候會進行迴流？

• 新增或者刪除可見的 DOM 元素的時候

• 元素的位置發生改變

• 元素的尺寸發生改變

• 內容改變

• 頁面第一次渲染的時候

• 列舉一些相關的 CSS 樣式：width、height、line-height、padding、margin、diaplay、border、top、position、float、font-size、overflow 等

什麼時候會進行重繪？

• 列舉一些相關的 CSS 樣式：color、background、background-size、visibility、box-shadow

如何進行效能最佳化？

• 用 transform 代替 top，left ，margin-top， margin-left… 這些位移屬性

• 不要使用 js 程式碼對 dom 元素設定多條樣式，選擇用一個 className 代替之

• 不要在迴圈內獲取 dom 的樣式例如：offsetWidth, offsetHeight, clientWidth, clientHeight 等。瀏覽器有一個迴流的緩衝機制，獲取這些屬性時會產生迴流

• 避免設定多層內聯樣式，寫個外部類這樣只回流一次

• 讓多次迴流的元素脫離文件流比如動畫，使用 position 屬性的 fixed 值或 absolute 值

• 一起變化（同時修改所有需要變化的屬性）