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個提高Web程序執行效率的好經驗》的理解

本文轉自鋼鋼博客園博客，原文鏈接：http://www.cnblogs.com/xugang/archive/2010/08/25/1808333.html，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的30 个提高Web 程序执行效率的好经验[转]的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。