JavaScript的優化心得體會大綱

效能對任何程式語言或系統來說都是一個很重要的問題，對JavaScript來說更是如此。

● JavaScript程式碼是從伺服器原封不動地傳送到客戶端的，程式碼越大，下載所需的時間和頻寬越多。

● JavaScript在瀏覽器中解釋，而不是編譯好的。

● JavaScript程式碼通過DOM API修改HTML頁面來與使用者互動。對JavaScript開發人員來說，這是功能強大的高階模型，但對DOM所做的每個簡單修改都將導致瀏覽器的頁面 渲染引擎執行一系列複雜的操作。對DOM看似細微的修改常常導致需要佔用比預期的多得多的CPU週期。

諸如Gmail和基於Ajax的Yahoo! Mail（編寫本書時仍處於測試階段）等Web應用程式都對JavaScript效能提出了挑戰。大量的人力被投入到這些Web應用程式中，它們在最新的 計算機中可能執行順暢，但在較舊的計算機中可能反應遲鈍，而在這些舊計算機中執行相應的.桌面應用程式沒有任何問題。

　　在下一小節中將介紹在JavaScript中最常見的兩個效能問題的解決方案。

3.2.1 縮短JavaScript的下載時間

大多數程式語言要麼是編譯型的，要麼在程式碼安裝的計算機中執行，或兩者兼而有之。例如，使用諸如Python、PHP或Perl等指令碼語言 時，程式碼在執行前不需要通過網路傳輸，而在本地執行。諸如Java等其他語言的程式碼被編譯成二進位制檔案，可在執行前通過網路傳輸。考慮到這種情況，採用了 大量措施以使二進位制格式更加緊湊。

JavaScript不屬於上述任何一種情況，其原始碼及用到的庫將被瀏覽器按原樣下載。因此，JavaScript程式碼的總體大小以及如何 將程式碼打包為檔案對頁面效能的影響巨大，這在剛開始編碼時可能無關緊要，但隨著編寫的程式碼和使用的庫越來越多，很快將導致下載頁面使用的 JavaScript程式碼時需要相當長的時間。

　　為最大限度地縮短下載時間，應這樣做：

● 除非每個頁面有不同的JavaScript，否則不要直接將JavaScript程式碼放在HTML中，而在HTML中引用JavaScript檔案。如果一定要在頁面中包含JavaScript，這樣的程式碼不能太長。

● 減少在頁面中包含的JavaScript檔案數。不需要走極端，將所有程式碼放到一個檔案中。包含不超過5個檔案是可行的，但如果包含超過20個檔案就要三 思而行。這些數字只是象徵性的，如果這是個問題，應進行測試看看在單個頁面中使用多少檔案將影響網站的效能。

● 減少使用的庫。如果使用大量不同來源的庫，它們的有些程式碼很可能是重複的。例如，每個庫都可能包含處理DOM事件的程式碼，這是一種浪費，因為這些程式碼可以 共享。選擇一個能夠解決大量問題且模組化的庫，這樣可只包含所需的子集。使用來自一個主要庫的程式碼還有其他好處：將減少依賴關係，從而降低不相容的可能 性；升級到新版本更容易；通常來說，大型庫將獲得更大社群的支援，因此更新更頻繁，新特性更多。本章後面的內容將更詳細地介紹JavaScript庫。

　　很多庫都會發布其程式碼的兩個版本：完整版和精簡版。

● 完整版適合用於閱讀和修改庫的程式碼。它包含縮排和註釋，對開發人員來說可讀性更高。

● 精簡版適合用於部署網站。這種版本是基於完整版自動建立的：刪除了註釋和縮排；通常所有程式碼位於一行中；有時候不暴露的變數被重新命名為很短（而晦澀）的名稱。

部署網站時，務必使用精簡版。根據自己編寫的程式碼長度，可能要使用工具建立JavaScript檔案的精簡版。這樣的工具有很多，其中包括開源（GPL）的ECMAScript Cruncher（ESC）。

　　3.2.2 最大限度地減少DOM更新

為完成任何有趣的工作，程式碼必須修改DOM。然而，修改DOM的開銷非常高。顯然，為處理修改頁面內容的DOM API呼叫，瀏覽器必須做大量工作。更令人驚訝的是，呼叫不修改頁面的方法（如註冊）可能非常慢。

另外，請注意遍歷大量DOM物件的程式碼，如遍歷以查詢特定元素的程式碼或document. getElementByName()。這些程式碼的執行時間將隨頁面的增大而增長。