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

1. 儘量避免使用DOM。當需要反覆使用DOM時，先把對DOM的引用存到JavaScript本地變數裡再使用。使用設定innerHTML的方法來替換document.createElement/appendChild()方 法。
2. eval()有問題，new Fuction()建構函式也是，儘量避免使用它們。
3. 拒絕使用with語句。 它會導致當你引用這個變數時去額外的搜尋這樣的一個名稱空間，with裡的程式碼在編譯時期是完全未知的。
4. 使用for()迴圈替代for…in循 環。因為for…in迴圈在開始迴圈之前需要Script引擎建立一個含有所有可迴圈屬性的 List，需要多檢查一次。
5. 把try-catch語句放在迴圈外面，不要放在迴圈裡面，因為異常是很少發生的，放在外面避免每次都要執行 它們。
6. 甚至聖經裡都提到過這個 – 不要全域性的。全域性變數的生命週期貫穿整個指令碼的生命週期，而本地變數的存在範圍隨著本地名稱空間的銷燬而消失。當在函式或其它地方引用一個全域性變數時，腳 本引擎需要搜尋整個全域性名稱空間。
7. fullName += 'John'; fullName += 'Holdings';執行速度快於fullName += 'John' + 'Holdings';
8. 如果你需要把多個字串連線起來，最好是把他們做成一個陣列，然後呼叫join()方法實現這個操作。這種方式在生成HTML片段時尤其 有效。
9. 對於簡單的任務，最好使用基本操作方式來實現，而不是使用函式呼叫實現。例如val1 < val2 ? val1 : val2;執行速度快於Math.min(val1, val2);，類似的，myArr.push(newEle);慢於myArr[myArr.length] = newEle;
10. 將函式的引用作為引數傳遞到setTimeout()和setInterval()裡優於將函式名作為字串引數傳遞（硬編碼）。例如，setTimeout(“someFunc()”, 1000)執行效率慢於setTimeout(someFunc, 1000)
11. 當進行遍歷操作時避免使用DOM操作。通過像getElementsByTagName()這 種方法得到的DOM元素佇列都是動態的；有可能在你還沒有對它遍歷完成時，它已經被改變。這有可能導致死迴圈。
12. 當你對物件的成員（屬性或方法）進行反覆操作時，先儲存對它們的引用。例如var getTags = document.getElementsByTagName; getTags(‘div’);
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方式。請參考這個優秀的文件http://www.slideshare.net/stubbornella/object-oriented-css
17. 使用CSS技術來優化圖片資源
18. 用GZip方式壓縮 .js 和 .css 檔案。如果你使用的是Apache，在 .htaccess 裡設定壓縮方式，你的HTML, XML 和 JSON 也同時會被壓縮。
    AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/json
19. 使用JavaScript壓縮工具。除了使用YUI和JSMin外，你還可以試一試Google Closure http://closure-compiler.appspot.com/home (感謝: James Westgate, 一位讀者)
20. 優化每個頁面上的各種資源，把它們拆分到各個子域上，這麼它們就能夠並行下載。請參考http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
21. 將CSS樣式表放在頁面的最頂端，這樣能方便包括IE在內的瀏覽器進行解析。
22. 儘量將DOM結構保持的越簡單越好。DOM的體積會影響相關的操作效率，像查詢， 遍歷，DOM改動都有影響。document.getElementsByTagName(‘*’).length這 個值越小越好。
23. 注意你使用的選擇器。例如，如果你想獲取一個ul下的直接子元素，使用jQuery(“ul > li”)而不要使用jQuery(“ul li”)
24. 當切換元素的可見性時(display),請記住：element.css({display:none})的 速度快於element.hide() 和 element.addClass(‘myHiddenClass’)。 除非在一個迴圈裡，我選擇element.addClass(‘myHiddenClass’)， 這樣會使程式碼更簡潔 – 不要使用 inline CSS 和 JavaScript。
25. 當你使用完對DOM的引用變數後，要把它置為NULL。
26. 使用AJAX時，GET的執行效率高於POST。所以要儘量使用 GET 方式。只是要注意一點，IE只允許你用GET傳送2K的資料。
27. 小心使用指令碼動畫。沒有硬體的支援，動畫會執行的很慢。儘量避免使用那些沒有實際價值的動畫效果。
28. 如果你的background-image對於這個圖片的容器太小的話，請避免使 用background-repeat。如果你的背景圖片需要來回填充很多次才能充滿背景，那麼將background-repeat屬性設定成background-image 和repeat-x 或 repeat-y來 達到填充背景的效果的做法是不明智的，這種填充方式的效率特別的低。你應該嘗試使用一個足夠大的圖片來做background-image並 且使用background-repeat: no-repeat。
29. 佈局時不要使用<table>。 <table>在瀏覽器完全把它畫出來之前需要反覆繪製好幾次。因為DOM中<table>是很少見的一種之後輸出的會影響之前輸出的顯示效果的元素。對於表格資料來說，你可 以使用table-layout:fixed; 這是一種更有效的現實演算法，根據CSS 2.1技術說明，這種寫法可以讓表格一行一行的輸出。
30. 儘可能的使用原始JavaScript。限制JavaScript框架的使用。

　　英文原文：30-best-practices-to-boost-your-web-applicati