編寫高性能Javascript代碼的若干建議
多年來，Javascript一直在web應用開發中占據重要的地位，但是很多開發者往往忽視一些性能方面的知識，特別是隨著計算機硬件的不斷升級，開發者越發覺得Javascript性能優化的好不好對網頁的執行效率影響不明顯。但在某些情況下，不優化的Javascript代碼必然會影響用戶的體驗。因此，即使在當前硬件性能已經大大提升的時代，在編寫Javascript代碼時，若能遵循Javascript規范和注意一些性能方面的知識，對于提升代碼的可維護性和優化性能將大有好處。
下面給出編寫高性能的Javascript代碼的若干建議：
1、盡量不要用for-in 循環去訪問數組，建議用 for 循環進行循環：
JavaScript
function foo1() {
var i, b, c=[1,2,3];
for (i in c) {
b = c[i];
if(b === "2")
return b;
}
}
//性能更好
function foo2() {
var i, b, c=[1,2,3];
for (i=0;i<c.length;i++) {
b = c[i];
if(b === "2")
return b;
}
}functionfoo1(){
vari,b,c=[1,2,3];
for(iinc){
b=c[i];
if(b==="2")
returnb;
}
}
//性能更好
functionfoo2(){
vari,b,c=[1,2,3];
for(i=0;i<c.length;i++){
b=c[i];
if(b==="2")
returnb;
}
}2、建議將對象進行緩存處理，特別是DOM訪問是比較消耗資源的：
JavaScript
//c.length沒有緩存，每次迭代都要計算一下數組的長度
function foo1() {
var i, b, c=[1,2,3];
for (i=0;i<c.length;i++) {
b = c[i];
if(b === "2")
return b;
}
}
//性能更好，第一次將數組的長度緩存到變量l中，第二次及后續的循環無需計算數組長度
function foo2() {
var i, b, c=[1,2,3],l;
for (i=0,l=c.length;i<l;i++) {
b = c[i];
if(b === "2")
return b;
}
}//c.length沒有緩存，每次迭代都要計算一下數組的長度
functionfoo1(){
vari,b,c=[1,2,3];
for(i=0;i<c.length;i++){
b=c[i];
if(b==="2")
returnb;
}
}
//性能更好，第一次將數組的長度緩存到變量l中，第二次及后續的循環無需計算數組長度
functionfoo2(){
vari,b,c=[1,2,3],l;
for(i=0,l=c.length;i<l;i++){
b=c[i];
if(b==="2")
returnb;
}
}JavaScript
//document.getElementById('info')沒有緩存，每次都要遍歷DOM
function foo1() {
var e;
document.getElementById('info').innerHTML="call 1";
document.getElementById('info').innerHTML="call 2";
}
//性能更好，第二次無需訪問DOM
function foo2() {
var e=document.getElementById('info');
e.innerHTML="call 1";
e.innerHTML="call 2";
}//document.getElementById('info')沒有緩存，每次都要遍歷DOM
functionfoo1(){
vare;
document.getElementById('info').innerHTML="call 1";
document.getElementById('info').innerHTML="call 2";
}
//性能更好，第二次無需訪問DOM
functionfoo2(){
vare=document.getElementById('info');
e.innerHTML="call 1";
e.innerHTML="call 2";
}3、建議不要在函數內進行過深的嵌套判斷：
JavaScript
//函數內嵌套判斷語句過多
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 {
//邏輯處理
}
}//函數內嵌套判斷語句過多
functionfoo1(){
varr={};
r.data={};
r.data.myProp=2;
if(r){
if(r.data){
if(r.data.myProp){
//邏輯處理
}
else{
//邏輯處理
}
}
}
}
//性能更好
functionfoo2(){
varr={};
r.data={};
r.data.myProp=2;
if(!r)return;
if(!r.data)return;
if(r.data.myProp){
//邏輯處理
}else{
//邏輯處理
}
}4、避免循環引用，防止內存泄漏：
JavaScript
//需要jQuery
function foo1(e,d) {
$(e).on("click", function() {
//對d進行邏輯處理
cbk(d);
}
});
}
//打破循環!
function foo2(e, d) {
$(e).on("click", cbk(d));
}
function cbk (d) {
//邏輯處理
}//需要jQuery
functionfoo1(e,d){
$(e).on("click",function(){
//對d進行邏輯處理
cbk(d);
}
});
}
//打破循環!
functionfoo2(e,d){
$(e).on("click",cbk(d));
}
functioncbk(d){
//邏輯處理
}5、建議避免在函數內返回一個未聲明的變量，會污染外部變量：
JavaScript
function foo(a, b) {
r = a + b;
return r; //r未聲明，則創建了一個全局變量
}functionfoo(a,b){
r=a+b;
returnr;//r未聲明，則創建了一個全局變量
}6、var聲明變量，建議寫在多行
JavaScript
//自己測試結果是foo1快，但也有一種觀點是foo2快
function foo1() {
var c = 1;
var sum=0;
var d = 0;
var e;
}
function foo2() {
var c = 1,sum=0, d = 0, e;
}//自己測試結果是foo1快，但也有一種觀點是foo2快
functionfoo1(){
varc=1;
varsum=0;
vard=0;
vare;
}
functionfoo2(){
varc=1,sum=0,d=0,e;
}說明：其實單個函數時間上差別較小，這里采用循環多次用累計時間進行性能對比，不同PC配置或者瀏覽器測試結果可能存在差異。
原文出處： JackWang-CUMT
本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！