當我們在做前端開發的時候，肯定會碰到操作dom的情況，在操作dom的時候，就會引起瀏覽器的重繪與重排。
▍重繪
如果dom變化僅僅影響的了visibility、outline、背景色等等非幾何屬性，此時就發生了重繪（repaint）而不是重排，因為布局沒有發生改變。▍重排
當dom變化影響了元素的幾何屬性（寬、高改變等等），瀏覽器此時需要重新計算元素幾何屬性，並且頁面中其他元素的幾何屬性可能會受影響，這樣渲染樹就發生了改變，也就是重新構造rendertree渲染樹，這個過程叫做重排（reflow）。以下情況會引發重排：
▍我是尾巴
重繪和重排都會影響效能（重排的影響更嚴重），所以，能避免的盡量避免。
瀏覽器重排與重繪
前幾天內推某街，被問到了醬紫乙個問題，了解瀏覽器的重繪與重排嗎？瞬間蒙住了，的確好像沒有怎麼聽說過。於是今天抽了點時間研究了下重排和重繪，這裡分享給大家。瀏覽器在頁面渲染過程中非常重要的兩個概念，即重排和重繪。了解這兩個概念對於你在今後寫 過程中，尤其是對效能要求比較高的話，有非常大的幫助。來看看這...
瀏覽器重繪和重排
我的部落格地圖 前端開發崗位是乙個知識範圍比較綜合的乙個崗位，需要了解和 的知識很多，因此，可以從廣度和深度兩個方面著手，初級工程師以廣度學習為主，高階工程師以深度研究為主。重排發生的情景 頁面渲染初始化 瀏覽器視窗改變 dom元素幾何屬性 width，height 變化 可見dom元素的增刪 do...
深入瀏覽器重排與重繪
dom樹表示頁面結構，渲染樹表示dom節點如何顯示。dom樹中的每乙個需要顯示的節點在渲染樹種至少存在乙個對應的節點 隱藏的dom元素disply值為none 在渲染樹中沒有對應的節點 渲染樹中的節點被稱為 幀 或 盒 符合css模型的定義，理解頁面元素為乙個具有填充，邊距，邊框和位置的盒子。一旦d...