欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

如何減少瀏覽器的reflow和repaint

 更新時(shí)間:2015年02月26日 09:52:16   投稿:hebedich  
本文主要是結(jié)合自己的一些項(xiàng)目經(jīng)驗(yàn),給大家提出了幾點(diǎn)減少瀏覽器reflow和repaint的方法和注意事項(xiàng),希望對(duì)大家能有所幫助。

1.避免在document上直接進(jìn)行頻繁的DOM操作,如果確實(shí)需要可以采用off-document的方式進(jìn)行,具體的方法包括但不完全包括以下幾種:

(1). 先將元素從document中刪除,完成修改后再把元素放回原來(lái)的位置
(2). 將元素的display設(shè)置為”none”,完成修改后再把display修改為原來(lái)的值
(3). 如果需要?jiǎng)?chuàng)建多個(gè)DOM節(jié)點(diǎn),可以使用DocumentFragment創(chuàng)建完后一次性的加入document

2.集中修改樣式

(1). 盡可能少的修改元素style上的屬性
(2). 盡量通過(guò)修改className來(lái)修改樣式
(3). 通過(guò)cssText屬性來(lái)設(shè)置樣式值

3. 緩存Layout屬性值

對(duì)于Layout屬性中非引用類型的值(數(shù)字型),如果需要多次訪問(wèn)則可以在一次訪問(wèn)時(shí)先存儲(chǔ)到局部變量中,之后都使用局部變量,這樣可以避免每次讀取屬性時(shí)造成瀏覽器的渲染。
var width = el.offsetWidth; var scrollLeft = el.scrollLeft;

4.設(shè)置元素的position為absolute或fixed

在元素的position為static和relative時(shí),元素處于DOM樹結(jié)構(gòu)當(dāng)中,當(dāng)對(duì)元素的某個(gè)操作需要重新渲染時(shí),瀏覽器會(huì)渲染整個(gè)頁(yè)面。將元素的position設(shè)置為absolute和fixed可以使元素從DOM樹結(jié)構(gòu)中脫離出來(lái)獨(dú)立的存在,而瀏覽器在需要渲染時(shí)只需要渲染該元素以及位于該元素下方的元素,從而在某種程度上縮短瀏覽器渲染時(shí)間,這在當(dāng)今越來(lái)越多的Javascript動(dòng)畫方面尤其值得考慮。

以上就是個(gè)人總結(jié)的一些關(guān)于減少瀏覽器reflow和repaint的事項(xiàng),希望大家能夠喜歡。

相關(guān)文章

最新評(píng)論