1.5　優化jQuery和DOM交互

jQuery是一個被廣泛使用的JavaScript庫，它能用簡潔方便靈活的方式來訪問和操作DOM元素，還可以減輕跨瀏覽器問題，使得你可以集中于核心應用開發而不是瀏覽器兼容問題。jQuery以選擇器引擎為核心，是你能以熟悉的CSS樣式的選擇器語言來找到DOM元素。例如，下面的代碼返回一個jQuery對象（一種數組）包含所有具有“big” CSS類的圖像元素：

或jQuery簡寫方式：

$images變量只是一個普通變量，前面的$僅僅是提醒它引用一個jQuery對象。

有一點需要特別注意的是：一個看似簡單無害的jQuery語句會在幕后做很多工作。如果只偶爾訪問少量的元素，還沒有太大關系。不過，如果要連續訪問許多元素，比如在一個動畫感很強的頁面，就會嚴重地影響性能。

1.5.1　優化CSS格式變化

用DHTML創建JavaScript圖形的一個基本操作就是快速操作DOM元素的CSS樣式屬性。在jQuery中，你可以這么做：

這個語句會找到id是element1的元素，并修改其CSS顏色樣式為紅色。

這個語句分解開來做了這么些事：

• 調用jQuery并讓它在DOM中搜索一個id為element1的元素。除了搜索本身之外，它還涉及進行正則表達式測試來決定需要搜索的類型。
• 返回找到的元素列表，一個特殊的jQuery數組對象。
• 調用jQuery的css()函數。這會進行不同的檢查，如決定是讀或寫，是否傳入一個字符串參數、對象或者更多，最后更新元素樣式本身。

連續進行這類的工作將會很慢，不管jQuery如何高效：

因為這里每行進行一次id為element1元素的搜索，這樣很沒有效率。

一個更快的方法是指定jQuery應該搜索的范圍。jQuery默認情況下要從document根或DOM層次的最上層開始搜索。而在許多情況下，這是沒有必要的。如果你指定一個范圍，會減少jQeury的搜索工作，更快地返回結果。

下面的例子搜索所有具有alien CSS類的元素，從環境參數（container）內的DOM元素中開始搜索：

環境參數的類型是靈活的，可以是另一個jQuery對象或CSS選擇器：

當然要確保搜索環境不比搜索元素本身慢。如果可能的話，應盡量直接引用DOM元素。

理想情況下，一旦元素被找到，你不應該再重新搜索它們。我們可以將搜索結果存起來：

不過上面的代碼中jQuery的css()函數調用還是做了額外的工作，我們可以直接引用到DOM元素的實際式樣對象中：

圖1-7顯示了前面3種方式的性能結果。在頁面更復雜、CSS選擇器更慢的情況，這種差別會更加明顯。

圖1-7　3種方式的速度比較（原始方式、保存元素對象的方式、直接寫元素CSS式樣的方式）

直接操作元素的屬性本身比使用jQuery更快。比如，jQuery.html()方法要比直接使用一個元素的innerHTML對象要慢許多。

圖1-7的結果意味著我們應該完全不使用jQuery嗎？不是，jQuery是不容錯過的，在某些環境下慢些是可以理解和接受的。但在速度很關鍵的代碼區內應注意jQuery的使用方式。這通常只是所有代碼中的一小部分。你的大部分應用程序可以（也應該）使用jQuery來快速方便地進行開發。

1.5.2　優化DOM插入

如果你的應用需要加入大量的元素到DOM中，可能會影響性能。DOM是一個復雜的數據結構，應盡量少去修改。這在動態Web頁面中當然是不太可能的，因此你需要一個高效的方式來插入元素。

你可以通過jQuery來插入一個元素到DOM中：

這對幾個元素來說是足夠了，但當你需要插入成百上千個元素時，單個插入這些元素會太慢。

更好的方式是將所有要插入的元素構建為一個大的字符串，然后一次插入。對每個元素，這防止了jQuery調用和進行各種內部測試的開銷。