一、什么是重繪Repaint和重排 （回流 reflow）
重繪:當元素的一部分屬性發生改變，如外觀、背景、顏色等不會引起布局變化，只需要瀏覽器根據元素的新屬性重新繪制
，使元素呈現新的外觀叫做重繪。
重排（回流）:當render樹中的一部分或者全部因為大小邊距等問題發生改變而需要DOM樹重新計算的過程
重繪不一定需要重排（比如顏色的改變），重排必然導致重繪（比如改變網頁位置）
二、引起重繪Repaint和重排（回流reflow ）的屬性
2.1 引起重繪Repaint的屬性
| 常見的重繪元素 | ||||
|---|---|---|---|---|
| color | border-style | visibility | background | |
| text-decoration | background-image | background-position | background-repeat | |
| outline-color | outline | outline-style | border-radius | |
| outline-width | box-shadow | background-size | ||
2.2 引起重排（回流reflow）的場景和屬性
1.添加、刪除可見的dom
2.元素的位置改變
3.元素的尺寸改變(外邊距、內邊距、邊框厚度、寬高、等幾何屬性)
4.頁面渲染初始化
5.瀏覽器窗口大小改變
6.設置style屬性
7.改變文字大小
8.添加/刪除樣式表
9.激活偽類，如:hover
10.操作class屬性
11.內容的改變，(用戶在輸入框中寫入內容也會)
| 常見的重排元素 | ||||
|---|---|---|---|---|
| width | height | padding | margin | |
| display | border-width | border | top | |
| position | font-size | float | text-align | |
| overflow-y | font-weight | overflow | left | |
| font-family | line-height | vertical-align | right | |
| clear | white-space | bottom | min-height | |
offsetTop |
offsetLeft |
offsetWidth |
offsetHeight |
|
scrollTop |
scrollLeft |
scrollWidth |
scrollHeight |
|
clientTop |
clientLeft |
clientWidth |
clientHeight |
|
getComputedStyle() |
(currentStyle in IE) |
|||
三、如何減少重繪（Repaint）和重排（reflow）
（1）不要一條一條地修改 DOM 的樣式。可以先定義好 css 的 class，然后修改 DOM 的 className。 （2）不要把 DOM 結點的屬性值放在一個循環里當成循環里的變量。 （3）為動畫的 HTML 元件使用 fixed 或 absoult 的 position，那么修改他們的 CSS 是不會 reflow 的。 （4）千萬不要使用 table 布局。因為可能很小的一個小改動會造成整個 table 的重新布局。(table及其內部元素除外，它可能需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍於同等元素的時間。這也是為什么我們要避免使用table做布局的一個原因。) （5）不要在布局信息改變的時候做查詢（會導致渲染隊列強制刷新）
（6）用translate替代top改變
（7）用opacity替代visibility（在獨立圖層下優化重繪）
參考文章
https://blog.csdn.net/xiaojinguniang/article/details/86544747