javascript代碼性能優化簡單介紹
repaint(重繪) ,repaint發生更改時,元素的外觀被改變,且在沒有改變布局的情況下發生,如改變outline,visibility,background color,不會影響到dom結構渲染。
reflow(渲染),與repaint區別就是他會影響到dom的結構渲染,同時他會觸發repaint,他會改變他本身與所有父輩元素(祖先),這種開銷是非常昂貴的,導致性能下降是必然的,頁面元素越多效果越明顯。
何時發生:
1. DOM元素的添加、修改(內容)、刪除( Reflow + Repaint)
2. 僅修改DOM元素的字體顏色(只有Repaint,因為不需要調整布局)
3. 應用新的樣式或者修改任何影響元素外觀的屬性
4. Resize瀏覽器窗口、滾動頁面
5. 讀取元素的某些屬性(offsetLeft、offsetTop、offsetHeight、offsetWidth、 scrollTop/Left/Width/Height、clientTop/Left/Width/Height、 getComputedStyle()、currentStyle(in IE))
如何避免:
1. 先將元素從document中刪除,完成修改后再把元素放回原來的位置
2. 將元素的display設置為”none”,完成修改后再把display修改為原來的值
3. 如果需要創建多個DOM節點,可以使用DocumentFragment創建完后一次性的加入document
var fragment = document.createDocumentFragment();
fragment.appendChild(document.createTextNode('keenboy test 111'));
fragment.appendChild(document.createElement('br'));
fragment.appendChild(document.createTextNode('keenboy test 222'));
document.body.appendChild(fragment);
4. 集中修改樣式
4.1盡可能少的修改元素style上的屬性
4.2盡量通過修改className來修改樣式
4.3通過cssText屬性來設置樣式值
element.style.width=”80px”; //reflow
element.style.height=”90px”; //reflow
element.style.border=”solid 1px red”; //reflow
以上就產生多次reflow,調用的越多產生就越多
element.style.cssText=”width:80px;height:80px;border:solid 1px red;”; //reflow
4.4緩存Layout屬性值
var left=elem.offsetLeft; 多次使用left也就產生一次reflow
4.5設置元素的position為absolute或fixed
元素脫離標準流,也從DOM樹結構中脫離出來,在需要reflow時只需要reflow自身與下級元素
4.6盡量不要用table布局
table元素一旦觸發reflow就會導致table里所有的其它元素 reflow。在適合用table的場合,可以設置table-layout為auto或fixed,這樣可以讓table一行一行的渲染,這種做法也是為了限制reflow的影響范圍
4.7避免使用expression,他會每次調用都會重新計算一遍(包括加載頁面)
相關推薦
-
outerText和innerText屬性的區別實例介紹
在開始文章技術細節的區別介紹之前,先來闡明一個標準上的區別:outrTxt是符合W3C標準的,而innrTxt則是非標準的。下面來先來看一段代碼實例:
-
js prototype屬性使用代碼實例
關于rototy屬性的用法這里不多介紹了,具體可以參閱jvscrit rototy原型一章節。下面就分享一段關于rototy屬性使用的代碼實例,需要的朋友可以做一下參考。代碼如
-
js獲取偽元素選擇器規定的內容代碼實例
關于偽元素選擇器可以參閱CSS bfor/::bfor一章節。下面介紹一下如何利用js獲取偽元素選擇器定義的內容,這種需求在以前可能比較少。但是隨著瀏覽器的進步,偽元素選擇器的實用會越來越廣
-
原生js的常用dom元素操簡單介紹
本章節簡單介紹幾個dom元素操作中常用的幾個方法或者屬性。一.通過id獲取元素對象:使用documnt.gtlmntById()方法即可實現此功能。具體可以參閱documnt.gtl
-
javascript實現的動態設置元素透明度代碼實例
本章節分享一段代碼實例,它實現了動態設置元素透明度的效果。并且能夠兼容當前主流的瀏覽器包括低版本的I瀏覽器。代碼實例如下: chrs















