JavaScript的優(yōu)化心得體會(huì)
性能對(duì)任何編程語(yǔ)言或系統(tǒng)來(lái)說(shuō)都是一個(gè)很重要的問題，對(duì)JavaScript來(lái)說(shuō)更是如此。
● JavaScript代碼是從服務(wù)器原封不動(dòng)地發(fā)送到客戶端的，代碼越大，下載所需的時(shí)間和帶寬越多。
● JavaScript在瀏覽器中解釋，而不是編譯好的。
● JavaScript代碼通過(guò)DOM API修改HTML頁(yè)面來(lái)與用戶交互。對(duì)JavaScript開發(fā)人員來(lái)說(shuō)，這是功能強(qiáng)大的高級(jí)模型，但對(duì)DOM所做的每個(gè)簡(jiǎn)單修改都將導(dǎo)致瀏覽器的頁(yè)面 渲染引擎執(zhí)行一系列復(fù)雜的操作。對(duì)DOM看似細(xì)微的修改常常導(dǎo)致需要占用比預(yù)期的多得多的CPU周期。
諸如Gmail和基于Ajax的Yahoo! Mail（編寫本書時(shí)仍處于測(cè)試階段）等Web應(yīng)用程序都對(duì)JavaScript性能提出了挑戰(zhàn)。大量的人力被投入到這些Web應(yīng)用程序中，它們?cè)谧钚碌?計(jì)算機(jī)中可能運(yùn)行順暢，但在較舊的計(jì)算機(jī)中可能反應(yīng)遲鈍，而在這些舊計(jì)算機(jī)中運(yùn)行相應(yīng)的桌面應(yīng)用程序沒有任何問題。
在下一小節(jié)中將介紹在JavaScript中最常見的兩個(gè)性能問題的解決方案。
3.2.1 縮短JavaScript的下載時(shí)間
大多數(shù)編程語(yǔ)言要么是編譯型的，要么在代碼安裝的計(jì)算機(jī)中運(yùn)行，或兩者兼而有之。例如，使用諸如Python、PHP或Perl等腳本語(yǔ)言 時(shí)，代碼在執(zhí)行前不需要通過(guò)網(wǎng)絡(luò)傳輸，而在本地運(yùn)行。諸如Java等其他語(yǔ)言的代碼被編譯成二進(jìn)制文件，可在執(zhí)行前通過(guò)網(wǎng)絡(luò)傳輸。考慮到這種情況，采用了 大量措施以使二進(jìn)制格式更加緊湊。
JavaScript不屬于上述任何一種情況，其源代碼及用到的庫(kù)將被瀏覽器按原樣下載。因此，JavaScript代碼的`總體大小以及如何 將代碼打包為文件對(duì)頁(yè)面性能的影響巨大，這在剛開始編碼時(shí)可能無(wú)關(guān)緊要，但隨著編寫的代碼和使用的庫(kù)越來(lái)越多，很快將導(dǎo)致下載頁(yè)面使用的 JavaScript代碼時(shí)需要相當(dāng)長(zhǎng)的時(shí)間。
為最大限度地縮短下載時(shí)間，應(yīng)這樣做：
● 除非每個(gè)頁(yè)面有不同的JavaScript，否則不要直接將JavaScript代碼放在HTML中，而在HTML中引用JavaScript文件。如果一定要在頁(yè)面中包含JavaScript，這樣的代碼不能太長(zhǎng)。
● 減少在頁(yè)面中包含的JavaScript文件數(shù)。不需要走極端，將所有代碼放到一個(gè)文件中。包含不超過(guò)5個(gè)文件是可行的，但如果包含超過(guò)20個(gè)文件就要三 思而行。這些數(shù)字只是象征性的，如果這是個(gè)問題，應(yīng)進(jìn)行測(cè)試看看在單個(gè)頁(yè)面中使用多少文件將影響網(wǎng)站的性能。
● 減少使用的庫(kù)。如果使用大量不同來(lái)源的庫(kù)，它們的有些代碼很可能是重復(fù)的。例如，每個(gè)庫(kù)都可能包含處理DOM事件的代碼，這是一種浪費(fèi)，因?yàn)檫@些代碼可以 共享。選擇一個(gè)能夠解決大量問題且模塊化的庫(kù)，這樣可只包含所需的子集。使用來(lái)自一個(gè)主要庫(kù)的代碼還有其他好處：將減少依賴關(guān)系，從而降低不兼容的可能 性；升級(jí)到新版本更容易；通常來(lái)說(shuō)，大型庫(kù)將獲得更大社區(qū)的支持，因此更新更頻繁，新特性更多。本章后面的內(nèi)容將更詳細(xì)地介紹JavaScript庫(kù)。
很多庫(kù)都會(huì)發(fā)布其代碼的兩個(gè)版本：完整版和精簡(jiǎn)版。
● 完整版適合用于閱讀和修改庫(kù)的代碼。它包含縮進(jìn)和注釋，對(duì)開發(fā)人員來(lái)說(shuō)可讀性更高。
● 精簡(jiǎn)版適合用于部署網(wǎng)站。這種版本是基于完整版自動(dòng)創(chuàng)建的：刪除了注釋和縮進(jìn)；通常所有代碼位于一行中；有時(shí)候不暴露的變量被重命名為很短（而晦澀）的名稱。
部署網(wǎng)站時(shí)，務(wù)必使用精簡(jiǎn)版。根據(jù)自己編寫的代碼長(zhǎng)度，可能要使用工具創(chuàng)建JavaScript文件的精簡(jiǎn)版。這樣的工具有很多，其中包括開源（GPL）的ECMAScript Cruncher（ESC）。
3.2.2 最大限度地減少DOM更新
為完成任何有趣的工作，代碼必須修改DOM。然而，修改DOM的開銷非常高。顯然，為處理修改頁(yè)面內(nèi)容的DOM API調(diào)用，瀏覽器必須做大量工作。更令人驚訝的是，調(diào)用不修改頁(yè)面的方法（如注冊(cè)）可能非常慢。
另外，請(qǐng)注意遍歷大量DOM對(duì)象的代碼，如遍歷documet.all以查找特定元素的代碼或document. getElementByName()。這些代碼的執(zhí)行時(shí)間將隨頁(yè)面的增大而增長(zhǎng)。
【JavaScript的優(yōu)化心得體會(huì)】相關(guān)文章：
關(guān)于javascript的心得體會(huì)03-02
優(yōu)化發(fā)展環(huán)境心得體會(huì)03-03
優(yōu)化課堂教學(xué)設(shè)計(jì)心得體會(huì)03-14
優(yōu)化經(jīng)濟(jì)的標(biāo)語(yǔ)03-30
優(yōu)化團(tuán)體作文05-22
優(yōu)化情緒，釋放壓力03-21