JavaScript的優(yōu)化準(zhǔn)則

申請免費(fèi)試用、咨詢電話：400-8352-114

首先我們來剖析一下JavaScript的運(yùn)轉(zhuǎn)機(jī)制。

JavaScript的運(yùn)轉(zhuǎn)機(jī)制

1.JavaScript代碼是從效勞器原封不動(dòng)地發(fā)送到客戶端的，代碼越大，下載所需的時(shí)間和帶寬越多。

2.JavaScript在閱讀器中解釋，而不是編譯好的。

3.JavaScript 代碼經(jīng)過DOM API修正HTML頁面來與用戶交互。對JavaScript開發(fā)人員來說，這是功用強(qiáng)大的高級模型，但對DOM所做的每個(gè)簡單修正都將招致閱讀器的頁面 渲染引擎執(zhí)行一系列復(fù)雜的操作。對DOM看似細(xì)微的修正常常招致需求占用比預(yù)期的多得多的CPU周期。Gmail和基于Ajax的、ahoo！ Mail等Web應(yīng)用程序都對妙性能提出了應(yīng)戰(zhàn)。大量的人力被投入到這些Web應(yīng)用程序中，它們在最新的計(jì)算機(jī)中可能運(yùn)轉(zhuǎn)順暢，但在較舊的計(jì)算機(jī)中可能反 應(yīng)愚鈍，而在這些舊計(jì)算機(jī)中運(yùn)轉(zhuǎn)相應(yīng)的桌面應(yīng)用程序沒有任何問題。

兩大JavaScript的優(yōu)化原則

一、縮短JavaScript的下載時(shí)間

人多數(shù)編程言語要么是編譯型的，要么在代碼裝置的計(jì)算機(jī)中運(yùn)轉(zhuǎn)，或者兩者兼而有之。例如，運(yùn)用諸如Python、PHP或Perl等腳本言語時(shí)，代碼在執(zhí)行 之前不需求經(jīng)過網(wǎng)絡(luò)傳輸，而在本地運(yùn)轉(zhuǎn)。但是諸如Java等其他言語的代碼被編譯成二進(jìn)制文件，可在執(zhí)行前經(jīng)過網(wǎng)絡(luò)傳輸。思索到這種狀況。采用的大量措施 使二進(jìn)制格式愈加緊湊。

JavaScript不屬于上述任何一種狀況，其源代碼和用到的庫被閱讀器依照原樣下載到客戶端，因而 JavaScript源代碼的大小以及打包傳輸方式將直接影響到頁面的性能，這些在剛開端編碼的時(shí)分或許無關(guān)緊要，但是隨著JavaScript繁榮庫越 來越多，很快將招致下載JavaScript代碼需求的時(shí)間越來越長。

為了縮短上述的下載時(shí)間嗎，我們有如下有效的措施：

1.除非每個(gè)頁面都有不同的JavaScript，否則不要將JavaScript放在網(wǎng)頁的HTML代碼中，而是在HTML代碼中援用JavaScript。假如一定要在頁面中包含JavaScript，這樣的頁面不能過長。

2.減少在頁面中包含的JavaScript文件數(shù)量。不需求走極端，將一切JavaScript代碼放到一個(gè)文件中。包含不超越5個(gè)文件是可行的。但是假如包 含超越20個(gè)文件就需求三思然后行了。當(dāng)然，這些數(shù)字只是一個(gè)意味性的闡明，詳細(xì)是什么狀況，包含幾JavaScript文件數(shù)將影響頁面的負(fù)荷才能需 要停止特地的測試才干得到準(zhǔn)確的數(shù)字。

3.減少運(yùn)用的庫。假如運(yùn)用大量不同來源的庫，他們或許有一些代碼是反復(fù)的。例如，每個(gè)庫中 可能包含處置DOM的代碼，這是一種糜費(fèi)。由于i這些代碼能夠共享。選擇一個(gè)能夠處理大量問題且模塊化的庫，這樣可只包含所需的子集。運(yùn)用一個(gè)主要庫的代 碼還有其他益處：減少依賴關(guān)系，從而降低不兼容的可能性；晉級到新版本更容易；通常來說，大型庫更容易遭到更大社區(qū)的支持，因而更新愈加頻繁，新特性更 多。

另外，JavaScript的很多庫都含有完好版和精簡版兩個(gè)版本。

完好版合適用于閱讀和修正庫的代碼。它包含縮進(jìn)和注釋，關(guān)于開發(fā)人員來說可讀性更高。

精簡版合適于用于部署網(wǎng)站。這種版本是基于完好版自動(dòng)創(chuàng)立的：刪除了注釋和縮進(jìn)；通常一切代碼位于一行中；有時(shí)分不暴露的變量被重命名為很短的稱號。

顯而易見，在部署網(wǎng)站時(shí)，我們務(wù)必運(yùn)用精簡版。依據(jù)本人編寫的代碼長度，可能要運(yùn)用工具創(chuàng)立JavaScript文件的精簡版。這樣的工具很多，其中開源的如（GPL）的ECMASScript Cruncher（ESC）。

二、最大限度的減少DOM更新

為完成任何有趣的功用，代碼必需修正DOM。但是，修正DOM的開支十分高。顯然，為處置修正頁面內(nèi)容的DOM API調(diào)用，閱讀器必需做大量的工作。更令人詫異的是，調(diào)用不修正頁面的辦法（如注冊監(jiān)聽器）可能十分慢。

另外，一定要留意遍歷大量的DOM對象的代碼，如遍歷document.all以查找特定元素的代碼或document.getElementByName（）。這些代碼的執(zhí)行時(shí)間將隨頁面的增大而增大。