編寫高性能Javascript代碼的N條建議
多年來,Javascript一直在web應用開發(fā)中占據重要的地位,但是很多開發(fā)者往往忽視一些性能方面的知識,特別是隨著計算機硬件的不斷升級,開發(fā)者越發(fā)覺得Javascript性能優(yōu)化的好不好對網頁的執(zhí)行效率影響不明顯。但在某些情況下,不優(yōu)化的Javascript代碼必然會影響用戶的體驗。因此,即使在當前硬件性能已經大大提升的時代,在編寫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ù)內進行過深的嵌套判斷:
//函數(shù)內嵌套判斷語句過多
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)引用,防止內存泄漏:
//需要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ù)內返回一個未聲明的變量,會污染外部變量:
function foo(a, b) {
r = a + b;
return r; //r未聲明,則創(chuàng)建了一個全局變量
}
6、var聲明變量,建議寫在多行
//自己測試結果是foo快,但也有一種觀點是foo快
function foo() {
var c = ;
var sum=;
var d = ;
var e;
}
function foo() {
var c = ,sum=, d = , e;
}
說明:其實單個函數(shù)時間上差別較小,這里采用循環(huán)多次用累計時間進行性能對比,不同PC配置或者瀏覽器測試結果可能存在差異。
以上內容是編寫高性能Javascript代碼的N條建議,希望對大家有所幫助。
相關文章
詳解webpack-dev-server使用http-proxy解決跨域問題
這篇文章主要介紹了詳解webpack-dev-server使用http-proxy解決跨域問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
uni-file-picker文件選擇上傳功能實現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07
JavaScript 設計模式 富有表現(xiàn)力的Javascript(一)
javascript設計模式是圖靈出版,學習中力求每個章節(jié)都細看。2010-05-05
JavaScript實現(xiàn)將UPC轉換成ISBN的方法
這篇文章主要介紹了JavaScript實現(xiàn)將UPC轉換成ISBN的方法,涉及javascript字符串操作的相關技巧,需要的朋友可以參考下2015-05-05
javascript 不停(setInterval)/延時(setTimeout)函數(shù)使用實例
如果想實現(xiàn)頁面的一些函數(shù)的定時執(zhí)行,需要用到下面的函數(shù)大家可以看下用法。2009-08-08
js HTML5多圖片上傳及預覽實例解析(不含前端的文件分割)
這篇文章主要詳細解析了js HTML5多圖片上傳及預覽實例,不含前端的文件分割,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08

