重排和重绘
一、重排
瀏覽器下載完頁(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é)
- 上一篇: NeHe OpenGL教程 第四十七课:
- 下一篇: OLTP(on-line transac