一、瀏覽器渲染過程？
瀏覽器渲染過程
瀏覽器生成渲染樹的過程
二、什么是重繪？回流（重排）？
定義
- 重排：重新生成布局。當(dāng)DOM 的變化影響了元素的幾何屬性（寬和高）--比如改變邊框?qū)挾然蚪o段落增加文字導(dǎo)致行數(shù)增加--瀏覽器需要重新計算元素的幾何屬性，同樣其他元素的幾何屬性和位置也會因此受到影響。瀏覽器會使渲染樹中受到影響的部分失效，并重新構(gòu)造渲染樹。這個過程稱為重排。
- 重繪：重新繪制。完成重排后，瀏覽器會重新繪制受影響的部分到屏幕中。這個過程稱為重繪。
重排與重繪的關(guān)系
重排一定會導(dǎo)致重繪，重繪不一定導(dǎo)致重排。如果DOM變化不影響幾何屬性，元素的布局沒有改變，則只發(fā)生一次重繪（不需要重排）。
哪些情況會發(fā)生重繪，回流？
---不同的條件下發(fā)生重排的范圍及程度會不同 ：
- 頁面初始渲染
- 改變字體，改變元素尺寸（寬、高、內(nèi)外邊距、邊框，改變元素位置等
各種情況：
- 設(shè)置 style 屬性的值
- 激活 CSS 偽類，比如 :hover
- 操作 class 屬性
- css3的某些屬性
- 改變元素內(nèi)容（文本或圖片等或比如用戶在input框中輸入文字）
- 添加/刪除可見DOM元素（注意：如果是刪除本身就display:none的元素不會發(fā)生重排；visibility:hidden的元素顯示或隱藏不影響重排）
- fixed定位的元素,在拖動滾動條的時候會一直回流
- 調(diào)整窗口大?。≧esizing the window）
- 計算 offsetWidth 和 offsetHeight 屬性
瀏覽器是聰明的，當(dāng)對以下屬性進行操作的時候：
包括：offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle() (currentStyle in IE)。
瀏覽器不會馬上操作它們，而是會先緩存在隊列中，有一定時間順序去執(zhí)行這些操作，但是在這過程中我們需要去獲取在該隊列中的屬性時，瀏覽器為取得正確的值就會觸發(fā)重排。這樣就使得瀏覽器的優(yōu)化失效了。
所以，在多次使用這些值時應(yīng)進行緩存。
三、如何減少重繪和回流（重排）
CSS中避免回流、重繪
- 盡可能在DOM樹的最末端改變class
- 避免設(shè)置多層內(nèi)聯(lián)樣式
- 動畫效果應(yīng)用到position屬性為absolute或fixed的元素上
- 避免使用table布局
- 使用css3硬件加速，可以讓transform、opacity、filters等動畫效果不會引起回流重繪
JS操作避免回流、重繪
- 避免使用JS一個樣式修改完接著改下一個樣式，最好一次性更改CSS樣式，或者將樣式列表定義為class的名稱
- 避免頻繁操作DOM，使用文檔片段創(chuàng)建一個子樹，然后再拷貝到文檔中
- 先隱藏元素，進行修改后再顯示該元素，因為display:none上的DOM操作不會引發(fā)回流和重繪
- 避免循環(huán)讀取offsetLeft等屬性，在循環(huán)之前把它們存起來
- 對于復(fù)雜動畫效果,使用絕對定位讓其脫離文檔流，否則會引起父元素及后續(xù)元素大量的回流
