減少dom數可以加快瀏覽器的在解析頁面過程中dom tree和render tree的構建,從而提高頁面效能。為此我們可以把頁面中那些首屏渲染不可見的部分html暫存在textarea中,等完成渲染後再處理這部分html來達到這個目的。 要把textarea 中暫存的html內容新增到頁面中,使用元素的outerhtml屬性是最簡單方便的了,不過在dom標準中並沒有定義outerhtml,支援的瀏覽器有ie6+,safari, operal和 chrome,經測試ff4.0- 中還不支援。所以我們就來實現乙個可以跨瀏覽器的outerhtml。
outerhtml 就是獲取或設定包含元素標籤本身在內的html。下面是實現**:
if(typeof htmlelement !== "undefined" && !("outerhtml" in htmlelement.prototype)) );}
**說明:
1 **中首先條件判斷來監測瀏覽器是否支援outerhtml以避免覆蓋瀏覽器原生的實現。
2 "__definesetter__","__definegetter__" 是firefox瀏覽器私有方面。分別定義當設定屬性值和獲取屬性要執行的操作。
3 在"__definesetter__" "outerhtml"中為了避免插入頁面中元素過多導致頻繁發生reflow影響效能。使用了文件碎片物件fragment來暫存需要插入頁面中dom元素。
4 在"__definegetter__" "outerhtml" 中使用元素attributes屬性來遍歷給元素指定的屬性。結合innerhtml返回了包含原屬本身在內的html字串。
測試**:
this isparagraphwith a list following it
ie和firefox中的不同
今天 3.17 遇到了乙個超鬱悶的問題,我用getelementsbyname時,在ie中怎麼也得不到乙個這個document物件,而firefox中卻可以。非常得納悶。google一下才發現兩個瀏覽器在使用方面有一下不同 w3c規範中getelementsbyname是按著name屬性進行檢索的,...
FireFox中IFRAME的返回上頁問題
專案開始寫靜態頁面了,該管理系統使用iframe框架。在寫靜態頁面過程中遇到了ff的history.back 和history.go 不能返回上頁的問題,但是在ie中可以使用,為了解決此問題,開始查詢資料,剛開始思路還是侷限於使用history.back或者go的方法上,在使用了好多方法下還是沒能完...
FireFox中IFRAME的返回上頁問題
專案開始寫靜態頁面了,該管理系統使用iframe框架。在寫靜態頁面過程中遇到了ff的history.back 和history.go 不能返回上頁的問題,但是在ie中可以使用,為了解決此問題,開始查詢資料,剛開始思路還是侷限於使用history.back或者go的方法上,在使用了好多方法下還是沒能完...