一、重排
瀏覽器下載完頁(yè)面中的所有組件（HTML、JavaScript、CSS、圖片）之后會(huì)解析生成兩個(gè)內(nèi)部數(shù)據(jù)結(jié)構(gòu)（DOM樹(shù)和渲染樹(shù)），DOM樹(shù)表示頁(yè)面結(jié)構(gòu)，渲染樹(shù)表示DOM節(jié)點(diǎn)如何顯示。重排是DOM元素的幾何屬性變化，DOM樹(shù)的結(jié)構(gòu)變化，渲染樹(shù)需要重新計(jì)算。
二、重繪
重繪是一個(gè)元素外觀的改變所觸發(fā)的瀏覽器行為，例如改變visibility、outline、背景色等屬性。瀏覽器會(huì)根據(jù)元素的新屬性重新繪制，使元素呈現(xiàn)新的外觀。由于瀏覽器的流布局，對(duì)渲染樹(shù)的計(jì)算通常只需要遍歷一次就可以完成。但table及其內(nèi)部元素除外，它可能需要多次計(jì)算才能確定好其在渲染樹(shù)中節(jié)點(diǎn)的屬性值，比同等元素要多花兩倍時(shí)間，這就是我們盡量避免使用table布局頁(yè)面的原因之一。
三、重繪和重排的關(guān)系
重繪不會(huì)引起重排，但重排一定會(huì)引起重繪，一個(gè)元素的重排通常會(huì)帶來(lái)一系列的反應(yīng)，甚至觸發(fā)整個(gè)文檔的重排和重繪，性能代價(jià)是高昂的。
四、什么情況下會(huì)觸發(fā)重排？
1、頁(yè)面渲染初始化時(shí)；（這個(gè)無(wú)法避免）
2、瀏覽器窗口改變尺寸；
3、元素尺寸改變時(shí)；
4、元素位置改變時(shí)；
5、元素內(nèi)容改變時(shí)；
6、添加或刪除可見(jiàn)的DOM 元素時(shí)。
五、重排優(yōu)化有如下五種方法
1、將多次改變樣式屬性的操作合并成一次操作，減少DOM訪問(wèn)。
2、如果要批量添加DOM，可以先讓元素脫離文檔流，操作完后再帶入文檔流，這樣只會(huì)觸發(fā)一次重排。（fragment元素的應(yīng)用）
3、將需要多次重排的元素，position屬性設(shè)為absolute或fixed，這樣此元素就脫離了文檔流，它的變化不會(huì)影響到其他元素。例如有動(dòng)畫(huà)效果的元素就最好設(shè)置為絕對(duì)定位。
4、由于display屬性為none的元素不在渲染樹(shù)中，對(duì)隱藏的元素操作不會(huì)引發(fā)其他元素的重排。如果要對(duì)一個(gè)元素進(jìn)行復(fù)雜的操作時(shí)，可以先隱藏它，操作完成后再顯示。這樣只在隱藏和顯示時(shí)觸發(fā)兩次重排。
5、在內(nèi)存中多次操作節(jié)點(diǎn)，完成后再添加到文檔中去。例如要異步獲取表格數(shù)據(jù)，渲染到頁(yè)面。可以先取得數(shù)據(jù)后在內(nèi)存中構(gòu)建整個(gè)表格的html片段，再一次性添加到文檔中去，而不是循環(huán)添加每一行。

轉(zhuǎn)載于:https://www.cnblogs.com/camille666/p/chongpai_chonghui.html

總結(jié)

以上是生活随笔為你收集整理的重排和重绘的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。