講清楚重排或回流、重繪

　　為了讓項目的運行效率更高，減少開銷，需要對重排、回流、重繪有一定的了解。

　　重排和回流其實是一回事。

　　瀏覽器渲染

　　瀏覽器在渲染頁面的時候，大致是以下幾個步驟：

　　1. 解析html生成DOM樹，解析css，生成CSSOM樹，將DOM樹和CSSOM樹結合，生成渲染樹;

　　2. 根據渲染樹，瀏覽器可以計算出網頁中有哪些節點，各節點的CSS以及從屬關系 - 回流

　　3. 根據渲染樹以及回流得到的節點信息，計算出每個節點在屏幕中的位置 - 重繪

　　4. 最后將得到的節點位置信息交給瀏覽器的圖形處理程序，讓瀏覽器中顯示頁面

　　回流

　　回流：英文叫reflow，指的是當渲染樹中的節點信息發生了大小、邊距等問題，需要重新計算各節點和css具體的大小和位置。

　　例：在css中對一個div修飾的樣式中，使用了寬度50%，此時需要將50%轉換為具體的像素，這個計算的過程，就是回流的過程。

　　容易造成回流的操作：

　　1、布局流相關操作

　　· 盒模型的相關操作會觸發重新布局

　　· 定位相關操作會觸發重新布局

　　· 浮動相關操作會觸發重新布局

　　2、改變節點內的內容

　　改變節點的結構或其中的文本結構會觸發重新布局

　　3、css

　　· width

　　· height

　　· padding

　　· border

　　· margin

　　· position

　　· top

　　· left

　　· bottom

　　· right

　　· float

　　· clear

　　· text-align

　　· vertical-align

　　· line-height

　　· font-weight

　　· font-size

　　· font-family

　　· overflow

　　· white-space

　　重繪

　　重繪：英文叫repaint，當節點的部分屬性發生變化，但不影響布局，只需要重新計算節點在屏幕中的絕對位置并渲染的過程，就叫重繪。比如：改變元素的背景顏色、字體顏色等操作會造成重繪。

　　回流的過程在重繪的過程前面，所以回流一定會重繪，但重繪不一定會引起回流。

　　容易造成重繪操作的css：

　　· color

　　· border-style

　　· border-radius

　　· text-decoration

　　· box-shadow

　　· outline

　　· background

　　每次回流都會對瀏覽器造成額外的計算消耗，所以瀏覽器對于回流和重繪有一定的優化機制。瀏覽器通常都會將多次回流操作放入一個隊列中，等過了一段時間或操作達到了一定的臨界值，然后才會挨個執行，這樣能節省一些計算消耗。但是在獲取布局信息操作的時候，會強制將隊列清空，也就是強制回流，比如訪問或操作以下或方法時：

　　· offsetTop

　　· offsetLeft

　　· offsetWidth

　　· offsetHeight

　　· scrollTop

　　· scrollLeft

　　· scrollWidth

　　· scrollHeight

　　· clientTop

　　· clientLeft

　　· clientWidth

　　· clientHeight