編寫高性能Javascript代碼的N條建議
更新時間：2015年10月12日 14:48:25 作者：JackWang-CUMT
JavaScript代碼在web應(yīng)用程序中經(jīng)常用到，但是很多開發(fā)者忽視了一些性能方面的知識，如何編寫高性能javascript代碼呢？接下來，小編跟大家一起學(xué)習(xí)
多年來，Javascript一直在web應(yīng)用開發(fā)中占據(jù)重要的地位，但是很多開發(fā)者往往忽視一些性能方面的知識，特別是隨著計算機硬件的不斷升級，開發(fā)者越發(fā)覺得Javascript性能優(yōu)化的好不好對網(wǎng)頁的執(zhí)行效率影響不明顯。但在某些情況下，不優(yōu)化的Javascript代碼必然會影響用戶的體驗。因此，即使在當前硬件性能已經(jīng)大大提升的時代，在編寫Javascript代碼時，若能遵循Javascript規(guī)范和注意一些性能方面的知識，對于提升代碼的可維護性和優(yōu)化性能將大有好處。
下面給出編寫高性能的Javascript代碼的若干建議：
1、盡量不要用for-in 循環(huán)去訪問數(shù)組，建議用 for 循環(huán)進行循環(huán)：
function foo() {
var i, b, c=[,,];
for (i in c) {
b = c[i];
if(b === "")
return b;
}
}
//性能更好
function foo() {
var i, b, c=[,,];
for (i=;i<c.length;i++) {
b = c[i];
if(b === "")
return b;
}
}
2、建議將對象進行緩存處理，特別是DOM訪問是比較消耗資源的：
//c.length沒有緩存，每次迭代都要計算一下數(shù)組的長度
function foo() {
var i, b, c=[,,];
for (i=;i<c.length;i++) {
b = c[i];
if(b === "")
return b;
}
}
//性能更好，第一次將數(shù)組的長度緩存到變量l中，第二次及后續(xù)的循環(huán)無需計算數(shù)組長度
function foo() {
var i, b, c=[,,],l;
for (i=,l=c.length;i<l;i++) {
b = c[i];
if(b === "")
return b;
}
}
//document.getElementById('info')沒有緩存，每次都要遍歷DOM
function foo() {
var e;
document.getElementById('info').innerHTML="call ";
document.getElementById('info').innerHTML="call ";
}
//性能更好，第二次無需訪問DOM
function foo() {
var e=document.getElementById('info');
e.innerHTML="call ";
e.innerHTML="call ";
}
3、建議不要在函數(shù)內(nèi)進行過深的嵌套判斷：
//函數(shù)內(nèi)嵌套判斷語句過多
function foo1() {
var r={};
r.data={};
r.data.myProp=2;
if (r) {
if (r.data) {
if (r.data.myProp) {
//邏輯處理
}
else {
//邏輯處理
}
}
}
}
//性能更好
function foo2() {
var r={};
r.data={};
r.data.myProp=2;
if (!r) return;
if (!r.data) return;
if (r.data.myProp) {
//邏輯處理
} else {
//邏輯處理
}
}
4、避免循環(huán)引用，防止內(nèi)存泄漏：
//需要jQuery
function foo(e,d) {
$(e).on("click", function() {
//對d進行邏輯處理
cbk(d);
}
});
}
//打破循環(huán)!
function foo(e, d) {
$(e).on("click", cbk(d));
}
function cbk (d) {
//邏輯處理
}
5、建議避免在函數(shù)內(nèi)返回一個未聲明的變量，會污染外部變量：
function foo(a, b) {
r = a + b;
return r; //r未聲明，則創(chuàng)建了一個全局變量
}
6、var聲明變量，建議寫在多行
//自己測試結(jié)果是foo快，但也有一種觀點是foo快
function foo() {
var c = ;
var sum=;
var d = ;
var e;
}
function foo() {
var c = ,sum=, d = , e;
}
說明：其實單個函數(shù)時間上差別較小，這里采用循環(huán)多次用累計時間進行性能對比，不同PC配置或者瀏覽器測試結(jié)果可能存在差異。
以上內(nèi)容是編寫高性能Javascript代碼的N條建議，希望對大家有所幫助。
相關(guān)文章
javascript小數(shù)計算出現(xiàn)近似值的解決辦法
在javascript里面，小數(shù)只能進行相似計算，例如：5.06+1.30，你得到的結(jié)果會是6.359999999999999，但有的小數(shù)計算又是正確的，如果計算出現(xiàn)了近似值，你可以用如下的方法計算。2010-02-02
這篇文章主要介紹了使用開源工具制作網(wǎng)頁驗證碼的方法的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-10-10
在 ES5 中，類的繼承可以有多種方式，然而過多的選擇有時反而會成為障礙，ES6 統(tǒng)了類繼承的寫法，避免開發(fā)者在不同寫法的細節(jié)之中過多糾纏，但在介紹新方法之前，還是有必要先回顧下ES5中類的繼承方式2022-08-08
要求用js寫一個函數(shù)，對傳入的形如下網(wǎng)址字符串，返回對應(yīng)的對象。2011-08-08
這篇文章主要給大家介紹了關(guān)于js獲取瀏覽器地址（獲取第1個斜杠后的內(nèi)容）的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了JavaScript新增樣式規(guī)則(推薦)的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-07-07
這篇文章主要為大家分享了9個實用的Javascript代碼高亮腳本，相信一定對大家的學(xué)習(xí)有所幫助，感興趣的小伙伴們可以參考一下2016-01-01
Javascript 模擬點擊事件(點擊鏈接與html點擊) 兼容IE/Firefox
Javascript 模擬點擊事件,一般情況下ie支持的，firefox并不支持。所以可以通過下面的方法解決。2010-01-01
這篇文章主要介紹了JavaScript中的全局對象介紹,對于任何JavaScript程序,當程序開始運行時,JavaScript解釋器都會初始化一個全局對象以供程序使用,需要的朋友可以參考下2015-01-01
這篇文章主要為大家詳細介紹了JavaScript如何利用Canvas實現(xiàn)文字水印和圖片水印合成的效果，文中的示例代碼講解詳細，需要的小伙伴可以參考一下2022-11-11