編寫高性能Javascript代碼的N條建議
多年來,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)文章
js將json格式內(nèi)容轉(zhuǎn)換成對象的方法
這篇文章介紹了js將json格式內(nèi)容轉(zhuǎn)換成對象的方法,有需要的朋友可以參考一下2013-11-11詳解webpack-dev-server使用http-proxy解決跨域問題
這篇文章主要介紹了詳解webpack-dev-server使用http-proxy解決跨域問題,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-01-01uni-file-picker文件選擇上傳功能實現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-07-07JavaScript 設(shè)計模式 富有表現(xiàn)力的Javascript(一)
javascript設(shè)計模式是圖靈出版,學(xué)習(xí)中力求每個章節(jié)都細看。2010-05-05JavaScript實現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法
這篇文章主要介紹了JavaScript實現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05javascript 不停(setInterval)/延時(setTimeout)函數(shù)使用實例
如果想實現(xiàn)頁面的一些函數(shù)的定時執(zhí)行,需要用到下面的函數(shù)大家可以看下用法。2009-08-08js HTML5多圖片上傳及預(yù)覽實例解析(不含前端的文件分割)
這篇文章主要詳細解析了js HTML5多圖片上傳及預(yù)覽實例,不含前端的文件分割,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-08-08