高性能WEB開發：DOM程式設計

　　我們知道，dom是用于操作xml和html文檔的應用程式接口，用腳本進行dom操作的代價很昂貴。有個貼切的比喻，把dom和javascript（這裡指ecmscript）各自想象為一個島嶼，它們之間用收費橋梁連接配接，ecmascript每次通路dom，都要途徑這座橋，并交納“過橋費”，通路dom的次數越多，費用也就越高。是以，推薦的做法是盡量減少過橋的次數，努力待在ecmascript島上。我們不可能不用dom的接口，那麼，怎樣才能提高程式的效率？

1、dom通路與修改

　　通路dom元素是有代價的，修改元素代價更是昂貴，因為它會導緻浏覽器重新計算頁面的幾何變化（重排和重繪）。

　　當然最壞的情況是在循環中通路或者修改元素，看下面兩段代碼：

　　結果第一次運作的時間居然是第二次的千倍！

　　第一段代碼的問題在于，每次循環疊代，該元素都會被通路兩次：一次讀取innerhtml的值，另一次重寫它，也就是說，每次循環都在過橋！結果充分表明，通路dom的次數越多，代碼的運作速度越慢。是以，能減少dom通路的次數則盡量減少，盡量留在ecmascript這端處理。

2、html集合 & 周遊dom

    操作dom另一個耗能點就是周遊dom，一般我們會收集一個html集合，比如用getelementsbytagname()，或者用document.links等，我想大家對此都不陌生。收集的結果是一個類似數組的集合，它處于一種“實時狀态”實時存在，這意味着當底層文檔對象更新時，它也會自動更新。怎麼講？很簡單舉個栗子：

　　而這正是低效之源！很簡單，跟數組的優化操作一樣，緩存個length變量就ok了（讀取一個集合的length比讀取一個普通數組的lengh要慢很多，因為每次都要查詢）。

　　我們看看性能提升能有多少？1: 0.974ms        2: 0.664ms

　　當集合的長度大的時候，性能提升還是很明顯的。

3、最後介紹兩個原生dom方法，queryselector()和queryselectorall()

　　相信大家都不陌生，前者傳回一個數組（注意，它們的傳回值不像html集合一樣會動态變化），後者傳回比對的第一個元素。好吧，其實并不是所有時候它的性能都優于前者的html集合周遊。

　　但是因為它是類似css的選擇方法，是以在做組合選擇的時候，效率會提升，又友善。比如做如下的組合查詢：