新聞中心
回流和重繪是瀏覽器渲染頁(yè)面時(shí)的兩個(gè)重要概念,它們的區(qū)別如下:

讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶,將通過(guò)不懈努力成為客戶在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴,公司提供的服務(wù)項(xiàng)目有:域名與空間、虛擬空間、營(yíng)銷軟件、網(wǎng)站建設(shè)、莊河網(wǎng)站維護(hù)、網(wǎng)站推廣。
定義
1、回流(Reflow):當(dāng)瀏覽器的渲染引擎發(fā)現(xiàn)某個(gè)部分發(fā)生了變化,需要重新計(jì)算該部分的幾何屬性以及其它相關(guān)屬性,這個(gè)過(guò)程就是回流,回流會(huì)導(dǎo)致整個(gè)頁(yè)面的布局發(fā)生變化,可能會(huì)影響頁(yè)面的性能。
2、重繪(Repaint):當(dāng)瀏覽器的渲染引擎發(fā)現(xiàn)某個(gè)部分的顏色、背景、邊框等樣式發(fā)生了變化,需要重新繪制該部分,這個(gè)過(guò)程就是重繪,重繪只會(huì)影響到頁(yè)面的部分區(qū)域,性能影響相對(duì)較小。
觸發(fā)條件
1、回流:
修改DOM元素的幾何屬性(如寬度、高度、邊距等);
修改DOM元素的樣式(如顏色、背景、邊框等);
添加或刪除DOM元素;
改變DOM樹的結(jié)構(gòu)(如增加或刪除子節(jié)點(diǎn))。
2、重繪:
修改DOM元素的樣式(如顏色、背景、邊框等);
修改CSS類名。
性能影響
1、回流:由于回流會(huì)導(dǎo)致整個(gè)頁(yè)面的布局發(fā)生變化,所以性能影響較大,在瀏覽器中,回流的成本是非常高的,因此應(yīng)該盡量減少回流的發(fā)生。
2、重繪:由于重繪只會(huì)影響到頁(yè)面的部分區(qū)域,所以性能影響較小,頻繁的重繪也會(huì)影響頁(yè)面的性能,因此應(yīng)該在不影響用戶體驗(yàn)的前提下盡量減少重繪的發(fā)生。
優(yōu)化建議
1、避免頻繁操作DOM元素,盡量使用文檔片段(DocumentFragment)進(jìn)行操作。
2、使用CSS3的transform和opacity屬性來(lái)替代left、top、margin等屬性,以減少回流的發(fā)生。
3、使用requestAnimationFrame()函數(shù)來(lái)進(jìn)行動(dòng)畫處理,以提高性能。
4、將多個(gè)改變樣式的操作合并為一個(gè),以減少重繪的次數(shù)。
網(wǎng)頁(yè)題目:回流和重繪有什么區(qū)別
轉(zhuǎn)載來(lái)于:http://m.5511xx.com/article/cdghdej.html


咨詢
建站咨詢
