瀏覽器重排與重繪

瀏覽器重排與重繪

　　前幾天內推某街，被問到了醬紫一個問題，瞭解瀏覽器的重繪與重排嗎？瞬間矇住了，的確好像沒有怎麼據說過。因而今天抽了點時間研究了下重排和重繪，這裏分享給你們。

　　瀏覽器在頁面渲染過程當中很是重要的兩個概念，即重排和重繪。瞭解這兩個概念對於你在從此寫代碼過程當中，尤爲是對性能要求比較高的話，有很是大的幫助。來看看這兩個概念：

• 重排(reflow) - 瀏覽器構建渲染樹完成時不包含位置和大小信息。計算元素位置和其餘幾何信息的過程稱爲重繪。
• 重繪(repaint) - 當佈局結束後，瀏覽器遍歷呈現樹，調用呈現器的paint方法，將呈現器的內容顯示在屏幕上。

　　瀏覽器從服務器端取到文檔到呈現到頁面過程當中是個相對比較複雜的過程，其中重要的就是重繪和重排。粗略的來說，文檔初次加載的時候，瀏覽器引擎會將HTML文檔解析成對應的DOM樹，緊接着會根據DOM元素的幾何屬性來構建一個用於渲染的的渲染樹，渲染樹的每一個節點都包含其大小和內外邊距等屬性（對於隱藏的不須要顯示的元素，不會構建到渲染樹當中）。渲染樹構建完成後，瀏覽器就能夠將元素放置到正確位置了，再根據渲染樹節點的樣式屬性繪製到頁面當中。

　　更改元素的外觀屬性可是不影響到其佈局的時候會引發重繪，例如修改其可見屬性、修改其背景顏色和圖片等。與重繪不一樣的是，更改元素的屬性影響到其幾何佈局的時候就會引發重排，例如修改文字大小、修改內外邊距等。對於瀏覽器來講，這兩種狀況都會影響到性能，重排影響更大，由於重排會影響到其父元素、子元素和兄弟元素的重排，並且重排是影響性能很是關鍵的幾個因素之一。

　　既然重排如此影響性能，那麼咱們來找出來都是哪些改變能引發重排。

• 從新調整瀏覽器窗口大小
• 修改字體
• 添加、刪除樣式表
• 修改頁面元素內容
• 激活CSS僞類，如a:hover
• 修改class的屬性
• 修改DOM
• 計算offsetWidth和offsetHeight
• 設置style的屬性

　　如何避免重排或者減小重排帶來的性能問題。

• 修改元素的class屬性，而且儘量在DOM樹中比較低的節點上
• 避免在內聯樣式中設置多重屬性
• 將動畫應用在absolute定位或者fixed的元素上
• 減小table佈局
• 避免使用CSS表達式

　　元素重排會影響到其全部的子元素，也會影響到其父元素和兄弟元素，所以修改元素的屬性會影響到重排的時候，儘量的在一些DOM樹中比較低的節點上修改。這樣將其重排的影響範圍降到最低。

　　咱們都知道與DOM進行交互會很是影響性能，所以避免過多的進行DOM交互。一樣，咱們設置樣式的時候，避免在內聯樣式中設置多重屬性，由於每設置一個屬性都會引發元素的重排，從而極大地影響性能。在須要設置多重屬性的時候，咱們能夠把它封裝成一個對象或者完整的class，而後一次性應用到元素當中去。從而將其對性能的影響降到最低。

　　將動畫應用到fixed或者absolute的元素上，由於這不會影響到其餘元素的佈局，也就不會影響到其餘元素的重排和重繪。由於他們只會引發本身的重排和重繪，所以極大地下降了對性能的損耗。

　　儘可能減小table佈局。過去爲了對齊等緣由，大部分的網頁都用table佈局，可是性能都很是差。table佈局的重排和重繪，它可能須要屢次計算才能肯定好其在渲染樹中節點的屬性，一般要花3倍於同等元素的時間。並且隨便一個cell的高度寬度的修改都會影響到整個表格重排，所以性能很是差。因此，儘可能避免使用table佈局。

　　減小使用CSS表達式，由於每當文檔從新加載或者部分文檔從新加載的時候，CSS表達式都會從新計算一次，所以其性能會收到很是大的影響。

 

 

　　參考：瀏覽器的重繪與重排

　　　　      REFLOWS & REPAINTS: CSS PERFORMANCE MAKING YOUR JAVASCRIPT SLOW?