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

申請(qǐng)免費(fèi)試用、咨詢(xún)電話(huà)：400-8352-114

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

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

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

2.JavaScript在閱讀器中解釋?zhuān)皇蔷幾g好的。

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

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

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

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

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

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

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

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

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

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

完好版合適用于閱讀和修正庫(kù)的代碼。它包含縮進(jìn)和注釋?zhuān)P(guān)于開(kāi)發(fā)人員來(lái)說(shuō)可讀性更高。

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

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

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

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

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