前端開發的時候大量的操作dom會引起瀏覽器重繪(redraw)和重排(reflow) 。
重繪是乙個元素外觀的改變所觸發的瀏覽器行為，例如改變visibility、outline、背景色等屬性。瀏覽器會根據元素的新屬性重新繪製，使元素呈現新的外觀。重繪不會帶來重新布局，並不一定伴隨重排。
重排是更明顯的一種改變，可以理解為渲染樹需要重新計算。下面是常見的觸發重排的操作：
dom元素的幾何屬性變化
dom元素的屬性變化時，瀏覽器會重新渲染該部分，而且會涉及到子節點/兄弟節點的重新計算。重排一定會引起瀏覽器的重繪，代價是很大的。
dom樹的結構變化
dom樹的增 刪 移動 ，會出發重排，瀏覽器引擎布局過程是從上到下的，從左到右的過程。 所以，如果在body最前面插入乙個元素，會導致整個文件的重新渲染，而在其後插入乙個元素，則不會影響到前面的元素。
獲取某些屬性
當獲取一些屬性的時候， 為了取得正確的值，會進行重排。 offsettop、offsetleft、 offsetwidth、offsetheight、scrolltop、scrollleft、scrollwidth、scrollheight、clienttop、clientleft、clientwidth、clientheight、getcomputedstyle() (currentstyle in ie)。所以，在多次使用這些值時應進行儲存。
改變元素樣式 也會引起重排。
盡量減小重排次數和影響範圍：
將多次改變樣式屬性的操作合併成一次操作。
var changediv =document.getelementbyid(『changediv』);changediv.style.color = 『#093′;
changediv.style.background =『#eee』;
changediv.style.height =』200px』;
//也可以 新增乙個class 一次增加class
將需要多次重排的元素，position屬性設為absolute或fixed，這樣此元素就脫離了文件流，它的變化不會影響到其他元素。例如有動畫效果的元素就最好設定為絕對定位。
在需要經常獲取那些引起瀏覽器重排的屬性值時，要快取到變數。
由於display屬性為none的元素不在渲染樹中，對隱藏的元素操作不會引發其他元素的重排。如果要對乙個元素進行複雜的操作時，可以先隱藏它，操作完成後再顯示。這樣只在隱藏和顯示時觸發2次重排
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程 中將重繪和重排引發的效能...
瀏覽器的重繪與重排
在專案的互動或視覺評審中，前端同學常常會對一些互動效果質疑，提出這樣做不好那樣做不好。主要原因是這些效果通常會產生一系列的瀏覽器重繪 redraw 和重排 reflow 需要付出高昂的效能代價。那麼，什麼是瀏覽器的重繪和重排呢？二者何時發生以及如何權衡？如何在具體的開發過程中將重繪和重排引發的效能問...