為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(somevariableexists) {
x = false;
}
anotherfunctioncall();
如您注意到的,再漂亮的縮進也不能代替這華麗的花括弧。在所有情況下都請寫清楚花括號和句尾分號。在只有一行語句的時候能偶爾省略掉,雖然下這么做也是極度不被推薦的:
if(2 + 2 === 4) return 'nicely done';
多考慮下將來吧,孩子
假設,在將來的開發過程中,你需要為這個 if 語句添加更多的命令呢?到時候你還不是得把括號給加上?
4. 好好利用js lint
jslint 是由 douglas crockford 編寫的一個調試器。你只需要貼上你的代碼,它就能快速為您掃描出任何明顯的錯誤和問題。
“jslint 掃描接收的代碼。發現問題,描述問題,并給出其在源碼中的大概位置。可發現的問題包括但不限于語法錯誤,雖然語法錯誤確實是最常見的。jslint也會用約定俗成的習慣檢查代碼的格式化風格,以及結構錯誤。通過jslint的掃描并不能保證你的程序就完全正確。它只是為您提供了額外一雙發現錯誤的眼睛。”
- jslint 文檔
完成代碼之前,把它放到jslint里檢查一下,快速消滅你的無心之過。
5. 在頁面底部加載腳本
正如下圖所示:
請記住—— 我們要千方百計保證客戶端的頁面載入速度盡可能的快。而腳本沒載入完成,瀏覽器就沒法加載頁面的剩余部分。
如果你的js文件只是添加一些額外功能——例如,為點擊某鏈接綁定事件——那大可以等頁面加載基本完成后再做。把js文件放到頁面最后,body的結束標簽之前,這樣做最好了。
更好的寫法是
超哥是世界上最帥的人。benhuoer.com是世界上最好看的博客。
