一下子遊篇學習之DOM編程

標籤：style   color   ar   使用   java   sp   for   檔案   資料   

每次想到“DOM”編程就會自然聯想到“效能瓶頸”。我覺得有兩部分原因：

1.DOM自己本身操作代價昂貴，因為瀏覽器通常要求DOM 實現和JavaScript 實現保持相互獨立；

2.嘿嘿，本人自身的原因，沒有本質全面認識她，沒有學習和思考如何高效運用其。

顯而見之，我目前可以著手改進第二條呀。。。。

忘了哪位大牛說過的一句話，“輕輕地觸摸DOM，並盡量保持在ECMAScript 範圍內。”

具體做法：

first：DOM 訪問和修改

who？   innerHTML or標準的DOM方法

使用DOM 方法更新頁面內容的另一個途徑是複製已有DOM 元素

 

second：HTML集合（是用於存放DOM 節點引用的類數組對象）

document.getElementsByName()
document.getElementsByClassName()
document.getElementsByTagName_r()

document.images

document.links

document.forms

document.forms[0].elements

HTML 集合是一個“虛擬存在，意味著當底層文檔更新時，它們將自動更新”，HTML 集合實際上在查詢文檔，當你更新資訊時，每次都要重複執行這種查詢操作，正是低效率的來源。

--------方案

1.將length 緩衝一下。

2.先將集合元素拷貝到數組（數組副本，評估是否有意），因為遍曆數組比遍曆集合快。

3.如果同一個DOM 屬性或方法被訪問一次以上，最好使用一個局部變數緩衝此DOM 成員。

 

third：抓取DOM

1.用nextSibling 抓取DOM 是首選方法

2.DOM 屬性諸如childNode，firstChild，和nextSibling 不區分元素節點和其他類型節點。

元素節點：children

3.函數querySelectorAll()接收一個CSS 選取器字串參數並返回一個NodeList（由合格節點構成的類數組對象）。此函數不返回
HTML 集合

列瀏覽器支援選取器API：Internet Explorer 8，Firefox 3.5，Safari 3.1，Chrome 1，Opera 10。

 

forth： 重繪和重排版

當瀏覽器下載完所有頁面的html標記、javascript、css、圖片之後，它解析檔案並建立兩個內部資料結構

a dom tree（表示頁面結構）+ a render tree（表示dom節點如何顯示）渲染樹上的節點稱為“框”或者“盒”。

擷取布局資訊的操作將導致重新整理隊列動作：

• offsetTop, offsetLeft, offsetWidth, offsetHeight
• scrollTop, scrollLeft, scrollWidth, scrollHeight
• clientTop, clientLeft, clientWidth, clientHeight
• getComputedStyle() (currentStyle in IE)（在IE 中此函數稱為currentStyle）

該將多個DOM 和風格改變合并到一個批次中一次性執行：cssText 屬性實現、修改CSS 的類名稱

firth：批量修改DOM
1.從文檔流中摘除該元素---》對其應用多重改變----》將元素帶迴文檔中

1.1隱藏元素，進行修改，然後再顯示它。

1.2使用一個文檔片斷在已存DOM 之外建立一個子樹，然後將它拷貝到文檔中。

1.3將原始元素拷貝到一個脫離文檔的節點中，修改副本，然後覆蓋原始元素。

 

sixth：事件託管

事件逐層冒泡總能被父元素捕獲。採用事件託管技術之後，你只需要在一個封裝元素上掛接一個控制代碼，用於處理子項目發生的所有事件。

 

一下子遊篇學習之DOM編程