DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 如何減少浏覽器的reflow和repaint
如何減少浏覽器的reflow和repaint
編輯:關於JavaScript     

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

(1). 先將元素從document中刪除,完成修改後再把元素放回原來的位置
(2). 將元素的display設置為”none”,完成修改後再把display修改為原來的值
(3). 如果需要創建多個DOM節點,可以使用DocumentFragment創建完後一次性的加入document

2.集中修改樣式

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

3. 緩存Layout屬性值

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

4.設置元素的position為absolute或fixed

在元素的position為static和relative時,元素處於DOM樹結構當中,當對元素的某個操作需要重新渲染時,浏覽器會渲染整個頁面。將元素的position設置為absolute和fixed可以使元素從DOM樹結構中脫離出來獨立的存在,而浏覽器在需要渲染時只需要渲染該元素以及位於該元素下方的元素,從而在某種程度上縮短浏覽器渲染時間,這在當今越來越多的Javascript動畫方面尤其值得考慮。

以上就是個人總結的一些關於減少浏覽器reflow和repaint的事項,希望大家能夠喜歡。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved