解讀30個提高Web程式執行效率的好經驗

　　其實微博是個好東西，關注一些技術博主之後，你不用再逛好多論壇了，因為一些很好的文章微博會告訴你，最近看到酷勤網推薦的一篇文章《30個提高Web程式執行效率的好經驗》，文章寫得不錯，提到一些經驗都比較實用，是我們每一個做前端開發的人員都必須知道的。本人逐條解讀一下，個人意見可能比較淺薄，看看大家對各個經驗點怎麼看了。

1、盡量避免使用DOM。當需要反覆使用DOM時，先把對DOM的引用存到JavaScript本地變數裡再使用。建立頁面元素的時候盡量不要使用DOM的document.createElement/appendChild()方法來建立，換用設定innerHTML的方法來替換。

jiuye：

過多使用DOM會增加DOM樹的規模，進而影響文檔遍曆以及尋找元素的效能。如果使用DOM元素的使用，建議使用如下方法進行：

var obj = document.getElementById("myId");obj.XXX...;

2、eval()有問題，new Fuction()建構函式也是，盡量避免使用它們。

jiuye：

使用eval()或new Function()建構函式作用於字串表示的源碼時，js引擎都需要將源碼轉換成可執行代碼。這樣的操作是很消耗資源的要比簡單的函數調用慢100倍以上。

同時，eval()函數效率特別低，由於事先無法知曉傳給 eval 的字串中的內容，eval在其上下文中解釋要處理的代碼，也就是說編譯器無法最佳化上下文，因此只能有瀏覽器在運行時解釋代碼。這對效能影響很大。newFunction()建構函式比eval()略好，因為使用此代碼不會影響周圍代碼，但是他的速度也快不到哪裡去。

可以通過重寫eval()來替換直接使用eval()，通過建立匿名函數的方法來替換new Function()。

3、拒絕使用with語句。 它會導致當你引用這個變數時去額外的搜尋這樣的一個命名空間，with裡的代碼在編譯時間期是完全未知的。

jiuye：

with的效率很低，with結構又建立了一個範圍，以便使用變數時指令碼引擎搜尋。這本身只輕微的影響效能。但嚴重的是編譯時間不知道此範圍內容，因此編譯器無法像對其他範圍（如函數產生的範圍）那樣對之最佳化。

可以使用變數引用對象，然後使用變數訪問對象屬性。但是此種方法要求屬性非文字類型。

先來看一個with的使用：

with( test.info ) {  name = 'John';  sex = 'male';}

再看看使用變數引用對象的執行個體：

var obj = test.infor;obj.name = 'John';obj.sex = 'male';

4、使用for()迴圈替代for…in迴圈。因為for…in迴圈在開始迴圈之前需要Script引擎建立一個含有所有可迴圈屬性的List，需要多檢查一次。

jiuye：

for...in迴圈需要指令碼引擎建立所有可枚舉的屬性列表，然後檢查是否存在重複。

5、把try-catch語句放在迴圈外面，不要放在迴圈裡面，因為異常是很少發生的，放在外面避免每次都要執行它們。

jiuye：

其實不僅僅是迴圈，因為try-catch-finally結構比較特殊。和其他文法結構不同，它在當前範圍中建立新變數。每當catch執行時，就會將捕獲到的exception對象賦給一個變數。這個變數不屬於任何指令碼。它在catch語句開始時被建立，在結束時被銷毀。由於此函數比較特殊，且是在運行時動態建立動態銷毀，有些瀏覽器對其的處理並不高效。把catch語句放在關鍵迴圈中將極大影響效能。如果可能，應在js中不頻繁被調用的地方進行異常處理，或通過檢查某種動作是否被支援來避免使用。

6、不要過多使用全域變數，全域變數的生命週期貫穿整個js的生命週期，而本地變數的存在範圍隨著本地命名空間的銷毀而消失。當在函數或其它地方引用一個全域變數時，指令碼引擎需要搜尋整個全域命名空間。

7、fullName += 'John'; fullName += 'Holdings';執行速度快於fullName += 'John' + 'Holdings'。

jiuye：

這個不知道該怎麼去解釋一下，至少我本人在js編碼時不會寫出這樣的語句：fullName += 'John' + 'Holdings'。

8、如果你需要把多個字串串連起來，最好是把他們做成一個數組，然後調用join()方法實現這個操作。這種方式在產生HTML片段時尤其有效。

jiuye：

這個主意贊的，以前沒注意到！！！

9、對於簡單的任務，最好使用基本操作方式來實現，而不是使用函數調用實現。例如val1 < val2 ? val1 : val2;執行速度快於Math.min(val1, val2);，類似的，myArr.push(newEle);慢於myArr[myArr.length] = newEle。

jiuye：

總之一句話，能用js簡單實現的東東就別用函數了，調用函數處理時效能肯定要比直接處理來的慢一點的。

10、將函數的引用作為參數傳遞到setTimeout()和setInterval()裡優於將函數名作為字串參數傳遞（寫入程式碼）。例如，setTimeout(“someFunc()”, 1000)執行效率慢於setTimeout(someFunc, 1000)。

jiuye：

setTimeout() 和 setInterval()方法類似於eval()。如果傳進參數是字串，則在一段時間之後，會和eval()一樣執行字串值，當然其低效率也和eval()一樣低。但這些方法也可以接受函數作為第一個參數。在一段時間後將調用此函數，但此函數可在編譯時間被解釋和最佳化，也就是說會有更好的效能。

使用字串作為參數：

setInterval('myFunction()',1000);setTimeout('alert(111);',500);

再來看看下面這個做法是不是更舒服點呢？

setInterval(myFunction,1000);setTimeout(function() {    alert(111);},500);

11、當進行遍曆操作時避免使用DOM操作。通過像getElementsByTagName()這 種方法得到的DOM元素隊列都是動態；有可能在你還沒有對它遍曆完成時，它已經被改變。這有可能導致死迴圈。

12、當你對對象的成員（屬性或方法）進行反覆操作時，先儲存對它們的引用。例如var getTags = document.getElementsByTagName; getTags(‘div’)。

jiuye：

這裡其實說的和1是一類問題，不要頻繁操作DOM。

13、在任何的程式碼片段裡，在局部變數範圍外存放一個這個局部變數的引用。例如：

function foo(arr) {    var a = ‘something’;    //變數a對於下面的代碼就是範圍外變數,這個變數的引用在很多情況下會有用處。    for (var i = 0, j = a, loopLen = arr.length; i < loopLen; i++) {        //do something    }}

14、for(var i=0; i < someArray.length; i++) {…}的執行效率慢於for (var i=0, loopLen=someArray.length; i<loopLen; i++) {…}。

15、在HTTP頭資訊裡加入緩衝控制到期和最大存活時間標記。

16、最佳化CSS。要使用<link>方式，而不要使用@import方式。

jiuye：

關於前端頁面CSS的最佳化我前面的文章有介紹過，這裡不再贅述。同樣針對js來說也是需要去做最佳化的。

17、使用CSS技術來最佳化圖片資源。

jiuye：

這一點對移動網站的開發來說尤為重要，圖片的處理是移動網站效能提升的一個很大的制約點。目前有所為的CSS“雪碧”技術、響應式圖片顯示等多種技術可以來做這個事情。

18、用GZip方式壓縮 .js 和 .css 檔案。如果你使用的是Apache，在 .htaccess 裡設定壓縮方式，你的HTML, XML 和 JSON 也同時會被壓縮。

19、使用JavaScript壓縮公用程式。除了使用YUI和JSMin外，你還可以試一試Google Closure。

20、最佳化每個頁面上的各種資源，把它們拆分到各個子域上，這麼它們就能夠並行下載。

jiuye：

可以把頁面中引用的js檔案、CSS檔案、靜態圖片資源都統統扔到CDN上面去。

21、將CSS樣式表放在頁面的最頂端，這樣能方便包括IE在內的瀏覽器進行解析。

jiuye：

同時提醒一下，js的引用放到頁面底部</body>的前面。

22、盡量將DOM結構保持的越簡單越好。DOM的體積會影響相關的操作效率，像尋找，遍曆，DOM改動都有影響。document.getElementsByTagName(‘*’).length這 個值越小越好。

jiuye：

在開發頁面的時候保持頁面的“乾淨”、“清潔”，不要過多使用元素，能簡化一定要簡化。

23、注意你使用的選取器。例如，如果你想擷取一個ul下的直接子項目，使用jQuery(“ul > li”)而不要使用jQuery(“ul li”)。

24、當切換元素的可見度時(display)，請記住：element.css({display:none})的 速度快於element.hide() 和 element.addClass(‘myHiddenClass’)。除非在一個迴圈裡，我選擇element.addClass(‘myHiddenClass’)， 這樣會使代碼更簡潔。

25、當你使用完對DOM的引用變數後，要把它置為NULL。

26、使用AJAX時，GET的執行效率高於POST。所以要盡量使用 GET 方式。只是要注意一點，IE只允許你用GET傳送2K的資料。

jiuye：

本人目前開發過程中暫時不要考慮IE，所以我這個偽前端比你們正牌前端要開放些自由些，哈哈~寫了好多了，玩笑一下，娛樂一把！

27、小心使用指令碼動畫。沒有硬體的支援，動畫會執行的很慢。盡量避免使用那些沒有實際價值的動畫效果。

jiuye：

當然，現在有CSS3之後，一些CSS3的轉換，變換等動畫效果同時也要考慮執行的效能問題，因為山寨機，低端行動裝置對CSS3的動畫支援效能還不是很牛逼的！

28、如果你的background-image對於這個圖片的容器太小的話，請避免使 用background-repeat。如果你的背景圖片需要來回填充很多次才能充滿背景，那麼將background-repeat屬性設定成 background-image 和repeat-x 或 repeat-y來 達到填充背景的效果的做法是不明智的，這種填充方式的效率特別的低。你應該嘗試使用一個足夠大的圖片來做background-image並 且使用background-repeat: no-repeat。

jiuye：

這個就要辛苦下UED的MMs。

29、布局時不要使用<table>。<table>在瀏覽器完全把它畫出來之前需要反覆繪製好幾次。因為DOM 中<table>是很少見的一種之後輸出的會影響之前輸出的顯示效果的元素。對於表格資料來說，你可以使用table-layout:fixed; 這是一種更有效現實演算法，根據CSS 2.1技術說明，這種寫法可以讓表格一行一行的輸出。

jiuye：

雖然有有效現實演算法來彌補<table>布局的缺點，但是本人是實在不願意使用<table>布局，尤其在移動頁面開發中，有<div>布局為什麼不用？現在還有CSS3的盒式布局，都比較牛逼的！

30、儘可能的使用原始JavaScript。限制JavaScript架構的使用。

jiuye：

不要濫用js架構，不過針對我目前的移動網站開發來說，雖然很苦逼的用jQuery，但是想jQuery Mobile、zepto等都是很優秀的移動開發js架構。當然如果視覺上有各自的風格和嚴格要求，jQuery Mobile就不建議，個人感覺jQuery Mobile的最大好處就是提供了一套標準的UI組件。