前幾天內推某街，被問到了醬紫乙個問題，了解瀏覽器的重繪與重排嗎？瞬間蒙住了，的確好像沒有怎麼聽說過。於是今天抽了點時間研究了下重排和重繪，這裡分享給大家。
瀏覽器在頁面渲染過程中非常重要的兩個概念，即重排和重繪。了解這兩個概念對於你在今後寫**過程中，尤其是對效能要求比較高的話，有非常大的幫助。來看看這兩個概念：
瀏覽器從伺服器端取到文件到呈現到頁面過程中是個相對比較複雜的過程，其中重要的就是重繪和重排。粗略的來講，文件初次載入的時候，瀏覽器引擎會將html文件解析成對應的dom樹，緊接著會根據dom元素的幾何屬性來構建乙個用於渲染的的渲染樹，渲染樹的每個節點都包含其大小和內外邊距等屬性（對於隱藏的不需要顯示的元素，不會構建到渲染樹當中）。渲染樹構建完成後，瀏覽器就可以將元素放置到正確位置了，再根據渲染樹節點的樣式屬性繪製到頁面當中。
更改元素的外觀屬性但是不影響到其布局的時候會引起重繪，例如修改其可見屬性、修改其背景顏色和等。與重繪不同的是，更改元素的屬性影響到其幾何布局的時候就會引起重排，例如修改文字大小、修改內外邊距等。對於瀏覽器來說，這兩種情況都會影響到效能，重排影響更大，因為重排會影響到其父元素、子元素和兄弟元素的重排，而且重排是影響效能非常關鍵的幾個因素之一。
既然重排如此影響效能，那麼我們來找出來都是哪些改變能引起重排。
如何避免重排或者減少重排帶來的效能問題。
元素重排會影響到其所有的子元素，也會影響到其父元素和兄弟元素，因此修改元素的屬性會影響到重排的時候，盡可能的在一些dom樹中比較低的節點上修改。這樣將其重排的影響範圍降到最低。
我們都知道與dom進行互動會非常影響效能，因此避免過多的進行dom互動。同樣，我們設定樣式的時候，避免在內聯樣式中設定多重屬性，因為每設定乙個屬性都會引起元素的重排，從而極大地影響效能。在需要設定多重屬性的時候，我們可以把它封裝成乙個物件或者完整的class，然後一次性應用到元素當中去。從而將其對效能的影響降到最低。
將動畫應用到fixed或者absolute的元素上，因為這不會影響到其他元素的布局，也就不會影響到其他元素的重排和重繪。因為他們只會引起自己的重排和重繪，因此極大地降低了對效能的損耗。
儘量減少table布局。過去為了對齊等原因，大部分的網頁都用table布局，但是效能都非常差。table布局的重排和重繪，它可能需要多次計算才能確定好其在渲染樹中節點的屬性，通常要花3倍於同等元素的時間。而且隨便乙個cell的高度寬度的修改都會影響到整個**重排，因此效能非常差。所以，盡量避免使用table布局。
深入瀏覽器重排與重繪
dom樹表示頁面結構，渲染樹表示dom節點如何顯示。dom樹中的每乙個需要顯示的節點在渲染樹種至少存在乙個對應的節點 隱藏的dom元素disply值為none 在渲染樹中沒有對應的節點 渲染樹中的節點被稱為 幀 或 盒 符合css模型的定義，理解頁面元素為乙個具有填充，邊距，邊框和位置的盒子。一旦d...
瀏覽器重繪與重排
當我們在做前端開發的時候，肯定會碰到操作dom的情況，在操作dom的時候，就會引起瀏覽器的重繪與重排。重繪 如果dom變化僅僅影響的了visibility outline 背景色等等非幾何屬性，此時就發生了重繪 repaint 而不是重排，因為布局沒有發生改變。重排 當dom變化影響了元素的幾何屬性...
瀏覽器重繪和重排
我的部落格地圖 前端開發崗位是乙個知識範圍比較綜合的乙個崗位，需要了解和 的知識很多，因此，可以從廣度和深度兩個方面著手，初級工程師以廣度學習為主，高階工程師以深度研究為主。重排發生的情景 頁面渲染初始化 瀏覽器視窗改變 dom元素幾何屬性 width，height 變化 可見dom元素的增刪 do...