編寫高性能Javascript代碼的N條建議
多年來(lái),Javascript一直在web應(yīng)用開發(fā)中占據(jù)重要的地位,但是很多開發(fā)者往往忽視一些性能方面的知識(shí),特別是隨著計(jì)算機(jī)硬件的不斷升級(jí),開發(fā)者越發(fā)覺得Javascript性能優(yōu)化的好不好對(duì)網(wǎng)頁(yè)的執(zhí)行效率影響不明顯。但在某些情況下,不優(yōu)化的Javascript代碼必然會(huì)影響用戶的體驗(yàn)。因此,即使在當(dāng)前硬件性能已經(jīng)大大提升的時(shí)代,在編寫Javascript代碼時(shí),若能遵循Javascript規(guī)范和注意一些性能方面的知識(shí),對(duì)于提升代碼的可維護(hù)性和優(yōu)化性能將大有好處。
下面給出編寫高性能的Javascript代碼的若干建議:
1、盡量不要用for-in 循環(huán)去訪問數(shù)組,建議用 for 循環(huán)進(jì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、建議將對(duì)象進(jìn)行緩存處理,特別是DOM訪問是比較消耗資源的:
//c.length沒有緩存,每次迭代都要計(jì)算一下數(shù)組的長(zhǎng)度 function foo() { var i, b, c=[,,]; for (i=;i<c.length;i++) { b = c[i]; if(b === "") return b; } } //性能更好,第一次將數(shù)組的長(zhǎng)度緩存到變量l中,第二次及后續(xù)的循環(huán)無(wú)需計(jì)算數(shù)組長(zhǎng)度 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 "; } //性能更好,第二次無(wú)需訪問DOM function foo() { var e=document.getElementById('info'); e.innerHTML="call "; e.innerHTML="call "; }
3、建議不要在函數(shù)內(nèi)進(jìn)行過深的嵌套判斷:
//函數(shù)內(nèi)嵌套判斷語(yǔ)句過多 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() { //對(duì)d進(jìn)行邏輯處理 cbk(d); } }); } //打破循環(huán)! function foo(e, d) { $(e).on("click", cbk(d)); } function cbk (d) { //邏輯處理 }
5、建議避免在函數(shù)內(nèi)返回一個(gè)未聲明的變量,會(huì)污染外部變量:
function foo(a, b) { r = a + b; return r; //r未聲明,則創(chuàng)建了一個(gè)全局變量 }
6、var聲明變量,建議寫在多行
//自己測(cè)試結(jié)果是foo快,但也有一種觀點(diǎn)是foo快 function foo() { var c = ; var sum=; var d = ; var e; } function foo() { var c = ,sum=, d = , e; }
說(shuō)明:其實(shí)單個(gè)函數(shù)時(shí)間上差別較小,這里采用循環(huán)多次用累計(jì)時(shí)間進(jìn)行性能對(duì)比,不同PC配置或者瀏覽器測(cè)試結(jié)果可能存在差異。
以上內(nèi)容是編寫高性能Javascript代碼的N條建議,希望對(duì)大家有所幫助。
相關(guān)文章
js將json格式內(nèi)容轉(zhuǎn)換成對(duì)象的方法
這篇文章介紹了js將json格式內(nèi)容轉(zhuǎn)換成對(duì)象的方法,有需要的朋友可以參考一下2013-11-11詳解webpack-dev-server使用http-proxy解決跨域問題
這篇文章主要介紹了詳解webpack-dev-server使用http-proxy解決跨域問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-01-01uni-file-picker文件選擇上傳功能實(shí)現(xiàn)
這篇文章主要介紹了uni-file-picker文件選擇上傳,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07JavaScript 設(shè)計(jì)模式 富有表現(xiàn)力的Javascript(一)
javascript設(shè)計(jì)模式是圖靈出版,學(xué)習(xí)中力求每個(gè)章節(jié)都細(xì)看。2010-05-05nestjs實(shí)現(xiàn)圖形校驗(yàn)和單點(diǎn)登錄的示例代碼
本文主要介紹了nestjs實(shí)現(xiàn)圖形校驗(yàn)和單點(diǎn)登錄的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05JavaScript實(shí)現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)將UPC轉(zhuǎn)換成ISBN的方法,涉及javascript字符串操作的相關(guān)技巧,需要的朋友可以參考下2015-05-05javascript 不停(setInterval)/延時(shí)(setTimeout)函數(shù)使用實(shí)例
如果想實(shí)現(xiàn)頁(yè)面的一些函數(shù)的定時(shí)執(zhí)行,需要用到下面的函數(shù)大家可以看下用法。2009-08-08js HTML5多圖片上傳及預(yù)覽實(shí)例解析(不含前端的文件分割)
這篇文章主要詳細(xì)解析了js HTML5多圖片上傳及預(yù)覽實(shí)例,不含前端的文件分割,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-08-08