網頁制作poluoluo文章簡介：為JavaScript做一點性能小提升吧！ 本文列出了24條能讓你的代碼編寫過程更為輕松高效的建議。也許您還是JavaScript初學者，剛剛寫完自己的Hello World，那這裡有很多對您的工作將十分有用的小貼士；也許有些技巧您已經知道，那就試試快速浏覽一下，看能不能發現一點新
為JavaScript做一點性能小提升吧！
本文列出了24條能讓你的代碼編寫過程更為輕松高效的建議。也許您還是JavaScript初學者，剛剛寫完自己的Hello World，那這裡有很多對您的工作將十分有用的小貼士；也許有些技巧您已經知道，那就試試快速浏覽一下，看能不能發現一點新東西吧！
注：本文多次用到Firebug的console對象，請參考 Firebug Console API 。關於firebug的更詳細介紹，請猛擊這裡。
1. 用 === 代替 ==JavaScript裡有兩種不同的相等運算符：===|!== 和==|!=。相比之下，前者更值得推薦。請盡量使用前者。
“如果兩個比較對象有著同樣的類型和值，===返回true，!==返回false。”
– JavaScript: The Good Parts
不過，如果使用==和!=，在操作不同數據類型時, 你可能會遇到一些意想不到的問題。在進行相等判斷前，JavaScript會試圖將它們轉換為字符串、數字或 Boolean量。
2. 避免使用Eval函數
Eval函數把一個字串作為參數，並把字串作為JavaScript語句執行，返回結果（參考）。
此函數不僅會降低你腳本的執行效率，而且還大大增加了安全風險，因為它賦予了作為文本的參數太大的權利。千萬別用！
3. 不要使用快速寫法
技術上說，你可以省略掉大部分花括弧和句尾分號，絕大多數浏覽器都能正確執行以下語句：
.if(someVariableExists)
x = false
不過，如果是這樣的呢：
.if(someVariableExists)
x = false
anotherFunctionCall();
你可能會認為它和下面的語句相等：
if(someVariableExists) {
x = false;
anotherFunctionCall();
}
不幸的是，事實並非如此。現實情況是它等價於：
如您注意到的，再漂亮的縮進也不能代替這華麗的花括弧。在所有情況下都請寫清楚花括號和句尾分號。在只有一行語句的時候能偶爾省略掉，雖然下這麼做也是極度不被推薦的：
if(2 + 2 === 4) return 'nicely done';
多考慮下將來吧，孩子
假設，在將來的開發過程中，你需要為這個 if 語句添加更多的命令呢？到時候你還不是得把括號給加上？
網頁制作poluoluo文章簡介：為JavaScript做一點性能小提升吧！ 本文列出了24條能讓你的代碼編寫過程更為輕松高效的建議。也許您還是JavaScript初學者，剛剛寫完自己的Hello World，那這裡有很多對您的工作將十分有用的小貼士；也許有些技巧您已經知道，那就試試快速浏覽一下，看能不能發現一點新
4. 好好利用JS Lint
JSLint 是由 Douglas Crockford 編寫的一個調試器。你只需要貼上你的代碼，它就能快速為您掃描出任何明顯的錯誤和問題。
“JSLint 掃描接收的代碼。發現問題，描述問題，並給出其在源碼中的大概位置。可發現的問題包括但不限於語法錯誤，雖然語法錯誤確實是最常見的。JSLint也會用約定俗成的習慣檢查代碼的格式化風格，以及結構錯誤。通過JSLint的掃描並不能保證你的程序就完全正確。它只是為您提供了額外一雙發現錯誤的眼睛。”
– JSLint 文檔
完成代碼之前，把它放到JSLint裡檢查一下，快速消滅你的無心之過。
5. 在頁面底部加載腳本
正如下圖所示：
點擊放大
請記住—— 我們要千方百計保證客戶端的頁面載入速度盡可能的快。而腳本沒載入完成，浏覽器就沒法加載頁面的剩余部分。
如果你的JS文件只是添加一些額外功能——例如，為點擊某鏈接綁定事件——那大可以等頁面加載基本完成後再做。把JS文件放到頁面最後，body的結束標簽之前，這樣做最好了。
更好的寫法是：
<p>超哥是世界上最帥的人。benhuoer.com是世界上最好看的博客。</p>
<script type="text/javascript" src="path/to/file.js"></script>
<script type="text/javascript" src="path/to/anotherFile.js"></script>
</body>
</html>
6. 在 For 語句外部聲明變量
當需要執行冗長的for語句時，不要讓JavaScript引擎每次都重復那些沒有必要的操作。例如：
這樣不好：
for(var i = 0; i < someArray.length; i++) {
var container = document.getElementById('container');
container.innerHtml += 'my number: ' + i;
console.log(i);
}
這段代碼每次都重新定義數組長度，每次都在遍歷DOM尋找container元素 —— 太傻了！
這樣好多了：
var container = document.getElementById('container');
for(var i = 0, len = someArray.length; i < len; i++) {
container.innerHtml += 'my number: ' + i;
console.log(i);
}
我要給留言改進這段代碼的人額外驚喜！歡迎大家留言討論！
7. 快速構建字串
要對一個數組或對象做循環操作時，不要老惦記著一表人才的for語句，拿點創意出來嘛！明明就還有很多更快的辦法：
var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';
“沒那麼多繁文缛節來煩你；你就信我一次好了（或者你也可以自己試一試）—— 這真的是迄今能找到的最快辦法了！
用點土辦法，也別管它背後究竟發生了什麼抽象的東西，通常土辦法都比那些優雅的辦法要快捷得多！”– James Padolsey, james.padolsey.com
網頁制作poluoluo文章簡介：為JavaScript做一點性能小提升吧！ 本文列出了24條能讓你的代碼編寫過程更為輕松高效的建議。也許您還是JavaScript初學者，剛剛寫完自己的Hello World，那這裡有很多對您的工作將十分有用的小貼士；也許有些技巧您已經知道，那就試試快速浏覽一下，看能不能發現一點新
8. 減少全局變量
“把你踩在全局的那些亂七八糟的腳印都歸於一人名下，能顯著降低與其他應用、小工具或JS庫沖突的可能性。” – Douglas Crockford
var name = 'Jeffrey';
var lastName = 'Way';
function doSomething() {...}
console.log(name); // Jeffrey -- or window.name
更好的寫法：
var DudeNameSpace = {
name : 'Jeffrey',
lastName : 'Way',
doSomething : function() {...}
}
console.log(DudeNameSpace.name); // Jeffrey
注意看，我們是如何戲劇化地把“亂七八糟的腳印”都歸到“DudeNameSpace”這對象之下的。
9. 寫好注釋
可能一開始你會覺得並無必要，但相信我，你將來會主動想要盡可能寫好代碼的注釋的。當你幾個月後再回看某項目時，結果卻發現很難想起當時寫某句東西時腦子在想的什麼了，是不是很讓人沮喪呢？或者，如果有同事要修訂你的代碼呢？一定，一定要為你代碼裡的重要部分加上注釋。
// Cycle through array and echo out each name.
for(var i = 0, len = array.length; i < len; i++) {
console.log(array[i]);
}
10. 試試漸進增強
一定要記得為未啟用JavaScript的情況提供替代方案。大家可能會認為，“大部分我的訪客都啟用了JavaScript的，我才不用擔心”。這樣的話，你可就大錯特錯了！
你有沒有試過看看禁用JavaScript後你那漂亮的滑動器都成啥樣了？（你可以下載 Web Developer ToolBar 輕松完成這項任務。）禁用之後你的網站可能就徹底失去了可用性！經驗之談：開發初期總是按照沒有JavaScript來設計你的網站，之後再進行漸進地功能增強，小心翼翼地改變你地布局。
11. 不要傳遞字串給 “setInterval” 或 “setTimeout”
看看下面的代碼：
setInterval(
"document.getElementById('container').innerHTML += 'My new number: ' + i", 3000
);
不僅執行不高效，而且和 eval 函數有著同樣的高風險。千萬不要把字串傳遞給 setInterval 和 setTimeout。恰當的做法是，傳遞一個函數名：
setInterval(someFunction, 3000);
12. 不要使用with語句
初識之下，“with”語句似乎還挺好用的。它用於設置代碼在特定對象中的作用域。其基本用法是提供深入到對象中處理元素的快速寫法。例如：
with (being.person.man.bodyparts) {
arms = true;
legs = true;
}
等價於：
being.person.man.bodyparts.arms = true;
being.person.man.bodyparts.legs= true;
不幸的是，測試表明，若你要為對象插入新成員，with的表現非常糟糕，它的執行速度非常緩慢。替代方案是聲明一個變量：
var o = being.person.man.bodyparts;
o.arms = true;
o.legs = true;