使用Function.apply()的參數(shù)數(shù)組化來(lái)提高 JavaScript程序性能的技巧
我們?cè)賮?lái)聊聊Function.apply() 在提升程序性能方面的技巧。
我們先從 Math.max() 函數(shù)說(shuō)起, Math.max后面可以接任意個(gè)參數(shù),最后返回所有參數(shù)中的最大值。
比如
alert(Math.max(5,8)) //8 alert(Math.max(5,7,9,3,1,6)) //9
但是在很多情況下,我們需要找出數(shù)組中最大的元素。
var arr=[5,7,9,1] alert(Math.max(arr)) // 這樣卻是不行的。一定要這樣寫(xiě) function getMax(arr){ var arrLen=arr.length; for(var i=0,ret=arr[0];i<arrLen;i++){ ret=Math.max(ret,arr[i]); } return ret; }
這樣寫(xiě)麻煩而且低效。如果用 apply呢,看代碼:
function getMax2(arr){ return Math.max.apply(null,arr) }
兩段代碼達(dá)到了同樣的目的,但是getMax2卻優(yōu)雅,高效,簡(jiǎn)潔得多。
看性能測(cè)試:
getMax性能測(cè)試
var myArr=new Array() function fillRnd(arrLen){ //填入 arrLen個(gè)1-10的隨機(jī)數(shù)字到數(shù)組 for(var i=0,arr=[];i<arrLen;i++){ arr[i]=Math.ceil(Math.random()*10) } return arr } function getMax(arr){ var arrLen=arr.length; for(var i=0,ret=arr[0];i<arrLen;i++){ ret=Math.max(ret,arr[i]); } return ret; } function getMax2(arr){ return Math.max.apply(null,arr) } myArr=fillRnd(20*10000) //生成20萬(wàn)個(gè)隨機(jī)數(shù)填到數(shù)組 var t1=new Date() var max1=getMax(myArr) var t2=new Date() var max2=getMax2(myArr) var t3=new Date() if (max1!==max2) alert("error") alert([t3-t2,t2-t1]) //在我機(jī)器上 96,464 .不同的機(jī)器,結(jié)果可能有差異
通過(guò)20萬(wàn)個(gè)數(shù)據(jù)的比較, getMax2 時(shí)間為 96ms 而 getmax時(shí)間為464。 兩者相差5倍
再比如數(shù)組的push方法。
var arr1=[1,3,4]; var arr2=[3,4,5];
如果我們要把 arr2展開(kāi),然后一個(gè)一個(gè)追加到 arr1中去,最后讓 arr1=[1,3,4,3,4,5]
arr1.push(arr2) 顯然是不行的。 因?yàn)檫@樣做會(huì)得到 [1,3,4, [3,4,5] ]
我們只能用一個(gè)循環(huán)去一個(gè)一個(gè)的push (當(dāng)然也可以用 arr1.concat(arr2) 但是concat方法并不改變 arr1本身)
var arrLen=arr2.length for(var i=0;i<arrLen;i++){ arr1.push(arr2[i]) }
自從有了 Apply ,事情就變得如此簡(jiǎn)單
Array.prototype.push.apply(arr1,arr2)
附:如何優(yōu)化JavaScript腳本的性能
隨著網(wǎng)絡(luò)的發(fā)展,網(wǎng)速和機(jī)器速度的提高,越來(lái)越多的網(wǎng)站用到了豐富客戶端技術(shù)。而現(xiàn)在Ajax則是最為流行的一種方式。JavaScript是一種解釋型語(yǔ)言,所以能無(wú)法達(dá)到和C/Java之類的水平,限制了它能在客戶端所做的事情,為了能改進(jìn)他的性能,我想基于我以前給JavaScript做過(guò)的很多測(cè)試來(lái)談?wù)勛约旱慕?jīng)驗(yàn),希望能幫助大家改進(jìn)自己的JavaScript腳本性能。
語(yǔ)言層次方面
循環(huán)
循環(huán)是很常用的一個(gè)控制結(jié)構(gòu),大部分東西要依靠它來(lái)完成,在JavaScript中,我們可以使用for(;;),while(),for(in)三種循環(huán),事實(shí)上,這三種循環(huán)中for(in)的效率極差,因?yàn)樗枰樵兩⒘墟I,只要可以就應(yīng)該盡量少用。for(;;)和while循環(huán)的性能應(yīng)該說(shuō)基本(平時(shí)使用時(shí))等價(jià)。
而事實(shí)上,如何使用這兩個(gè)循環(huán),則有很大講究。我在測(cè)試中有些很有意思的情況,見(jiàn)附錄。最后得出的結(jié)論是:
如果是循環(huán)變量遞增或遞減,不要單獨(dú)對(duì)循環(huán)變量賦值,應(yīng)該在它最后一次讀取的時(shí)候使用嵌套的++或—操作符。
如果要與數(shù)組的長(zhǎng)度作比較,應(yīng)該事先把數(shù)組的length屬性放入一個(gè)局部變量中,減少查詢次數(shù)。
局部變量和全局變量
局部變量的速度要比全局變量的訪問(wèn)速度更快,因?yàn)槿肿兞科鋵?shí)是全局對(duì)象的成員,而局部變量是放在函數(shù)的棧當(dāng)中的。
不使用Eval
使用eval相當(dāng)于在運(yùn)行時(shí)再次調(diào)用解釋引擎對(duì)內(nèi)容進(jìn)行運(yùn)行,需要消耗大量時(shí)間。這時(shí)候使用JavaScript所支持的閉包可以實(shí)現(xiàn)函數(shù)模版(關(guān)于閉包的內(nèi)容請(qǐng)參考函數(shù)式編程的有關(guān)內(nèi)容)
減少對(duì)象查找
因?yàn)镴avaScript的解釋性,所以a.b.c.d.e,需要進(jìn)行至少4次查詢操作,先檢查a再檢查a中的b,再檢查b中的c,如此往下。所以如果這樣的表達(dá)式重復(fù)出現(xiàn),只要可能,應(yīng)該盡量少出現(xiàn)這樣的表達(dá)式,可以利用局部變量,把它放入一個(gè)臨時(shí)的地方進(jìn)行查詢。
這一點(diǎn)可以和循環(huán)結(jié)合起來(lái),因?yàn)槲覀兂3R鶕?jù)字符串、數(shù)組的長(zhǎng)度進(jìn)行循環(huán),而通常這個(gè)長(zhǎng)度是不變的,比如每次查詢a.length,就要額外進(jìn)行一個(gè)操作,而預(yù)先把var len=a.length,則就少了一次查詢。
字符串連接
如果是追加字符串,最好使用s+=anotherStr操作,而不是要使用s=s+anotherStr。
如果要連接多個(gè)字符串,應(yīng)該少使用+=,如
s+=a;s+=b;s+=c;應(yīng)該寫(xiě)成
s+=a + b + c;而如果是收集字符串,比如多次對(duì)同一個(gè)字符串進(jìn)行+=操作的話,最好使用一個(gè)緩存。怎么用呢?使用JavaScript數(shù)組來(lái)收集,最后使用join方法連接起來(lái),如下
var buf = new Array();for(var i = 0; i < 100; i++){ buf.push(i.toString());}var all = buf.join("");類型轉(zhuǎn)換
類型轉(zhuǎn)換是大家常犯的錯(cuò)誤,因?yàn)镴avaScript是動(dòng)態(tài)類型語(yǔ)言,你不能指定變量的類型。
1. 把數(shù)字轉(zhuǎn)換成字符串,應(yīng)用"" + 1,雖然看起來(lái)比較丑一點(diǎn),但事實(shí)上這個(gè)效率是最高的,性能上來(lái)說(shuō):
("" +) > String() > .toString() > new String()
這條其實(shí)和下面的“直接量”有點(diǎn)類似,盡量使用編譯時(shí)就能使用的內(nèi)部操作要比運(yùn)行時(shí)使用的用戶操作要快。
String()屬于內(nèi)部函數(shù),所以速度很快,而.toString()要查詢?cè)椭械暮瘮?shù),所以速度遜色一些,new String()用于返回一個(gè)精確的副本。
2. 浮點(diǎn)數(shù)轉(zhuǎn)換成整型,這個(gè)更容易出錯(cuò),很多人喜歡使用parseInt(),其實(shí)parseInt()是用于將字符串轉(zhuǎn)換成數(shù)字,而不是浮點(diǎn)數(shù)和整型之間的轉(zhuǎn)換,我們應(yīng)該使用Math.floor()或者M(jìn)ath.round()。
另外,和第二節(jié)的對(duì)象查找中的問(wèn)題不一樣,Math是內(nèi)部對(duì)象,所以Math.floor()其實(shí)并沒(méi)有多少查詢方法和調(diào)用的時(shí)間,速度是最快的。
3. 對(duì)于自定義的對(duì)象,如果定義了toString()方法來(lái)進(jìn)行類型轉(zhuǎn)換的話,推薦顯式調(diào)用toString(),因?yàn)閮?nèi)部的操作在嘗試所有可能性之后,會(huì)嘗試對(duì)象的toString()方法嘗試能否轉(zhuǎn)化為String,所以直接調(diào)用這個(gè)方法效率會(huì)更高
使用直接量
其實(shí)這個(gè)影響倒比較小,可以忽略。什么叫使用直接量,比如,JavaScript支持使用[param,param,param,...]來(lái)直接表達(dá)一個(gè)數(shù)組,以往我們都使用new Array(param,param,...),使用前者是引擎直接解釋的,后者要調(diào)用一個(gè)Array內(nèi)部構(gòu)造器,所以要略微快一點(diǎn)點(diǎn)。
同樣,var foo = {}的方式也比var foo = new Object();快,var reg = /../;要比var reg=new RegExp()快。
字符串遍歷操作
對(duì)字符串進(jìn)行循環(huán)操作,譬如替換、查找,應(yīng)使用正則表達(dá)式,因?yàn)楸旧鞪avaScript的循環(huán)速度就比較慢,而正則表達(dá)式的操作是用C寫(xiě)成的語(yǔ)言的API,性能很好。
高級(jí)對(duì)象
自定義高級(jí)對(duì)象和Date、RegExp對(duì)象在構(gòu)造時(shí)都會(huì)消耗大量時(shí)間。如果可以復(fù)用,應(yīng)采用緩存的方式。
DOM相關(guān)
插入HTML
很多人喜歡在JavaScript中使用document.write來(lái)給頁(yè)面生成內(nèi)容。事實(shí)上這樣的效率較低,如果需要直接插入HTML,可以找一個(gè)容器元素,比如指定一個(gè)div或者span,并設(shè)置他們的innerHTML來(lái)將自己的HTML代碼插入到頁(yè)面中。
對(duì)象查詢
使用[“”]查詢要比.items()更快,這和前面的減少對(duì)象查找的思路是一樣的,調(diào)用.items()增加了一次查詢和函數(shù)的調(diào)用。
創(chuàng)建DOM節(jié)點(diǎn)
通常我們可能會(huì)使用字符串直接寫(xiě)HTML來(lái)創(chuàng)建節(jié)點(diǎn),其實(shí)這樣做
無(wú)法保證代碼的有效性
字符串操作效率低
所以應(yīng)該是用document.createElement()方法,而如果文檔中存在現(xiàn)成的樣板節(jié)點(diǎn),應(yīng)該是用cloneNode()方法,因?yàn)槭褂胏reateElement()方法之后,你需要設(shè)置多次元素的屬性,使用cloneNode()則可以減少屬性的設(shè)置次數(shù)——同樣如果需要?jiǎng)?chuàng)建很多元素,應(yīng)該先準(zhǔn)備一個(gè)樣板節(jié)點(diǎn)。
定時(shí)器
如果針對(duì)的是不斷運(yùn)行的代碼,不應(yīng)該使用setTimeout,而應(yīng)該是用setInterval。setTimeout每次要重新設(shè)置一個(gè)定時(shí)器。
其他
腳本引擎
據(jù)我測(cè)試Microsoft的JScript的效率較Mozilla的Spidermonkey要差很多,無(wú)論是執(zhí)行速度還是內(nèi)存管理上,因?yàn)镴Script現(xiàn)在基本也不更新了。但SpiderMonkey不能使用ActiveXObject
文件優(yōu)化
文件優(yōu)化也是一個(gè)很有效的手段,刪除所有的空格和注釋,把代碼放入一行內(nèi),可以加快下載的速度,注意,是下載的速度而不是解析的速度,如果是本地,注釋和空格并不會(huì)影響解釋和執(zhí)行速度。
總結(jié)
本文總結(jié)了我在JavaScript編程中所找到的提高JavaScript運(yùn)行性能的一些方法,其實(shí)這些經(jīng)驗(yàn)都基于幾條原則:
直接拿手頭現(xiàn)成的東西比較快,如局部變量比全局變量快,直接量比運(yùn)行時(shí)構(gòu)造對(duì)象快等等。
盡可能少地減少執(zhí)行次數(shù),比如先緩存需要多次查詢的。
盡可能使用語(yǔ)言內(nèi)置的功能,比如串鏈接。
盡可能使用系統(tǒng)提供的API,因?yàn)檫@些API是編譯好的二進(jìn)制代碼,執(zhí)行效率很高
同時(shí),一些基本的算法上的優(yōu)化,同樣可以用在JavaScript中,比如運(yùn)算結(jié)構(gòu)的調(diào)整,這里就不再贅述了。但是由于JavaScript是解釋型的,一般不會(huì)在運(yùn)行時(shí)對(duì)字節(jié)碼進(jìn)行優(yōu)化,所以這些優(yōu)化仍然是很重要的。
當(dāng)然,其實(shí)這里的一些技巧同樣使用在其他的一些解釋型語(yǔ)言中,大家也可以進(jìn)行參考。
由于是以前做過(guò)的測(cè)試,測(cè)試代碼已經(jīng)不全,我補(bǔ)充了一部分如下:
var print; if(typeof document != "undefined" ){ print = function(){ document.write(arguments[0]); } }else if(typeof WScript != "undefined" ){ print = function(){ WScript.Echo(arguments[0],arguments[1],arguments[2]); } } function empty(){ } function benchmark(f){ var i = 0; var start = (new Date()).getTime(); while(i < pressure){ f(i++); } var end = (new Date()).getTime(); WScript.Echo(end-start); } /* i=0 start = (new Date()).getTime(); while(i < 60000){ c = [i,i,i,i,i,i,i,i,i,i]; i++; } end = (new Date()).getTime(); WScript.Echo(end-start); i=0 start = (new Date()).getTime(); while(i < 60000){ c = new Array(i,i,i,i,i,i,i,i,i,i); i++; } var end = (new Date()).getTime(); WScript.Echo(end-start); */ function internCast(i){ return "" + i; } function StringCast(i){ return String(i) } function newStringCast(i){ return new String(i) } function toStringCast(i){ return i.toString(); } function ParseInt(){ return parseInt(j); } function MathFloor(){ return Math.floor(j); } function Floor(){ return floor(j); } var pressure = 50000; var a = ""; var floor = Math.floor; j = 123.123; print("-------------\nString Conversion Test"); print("The empty:", benchmark(empty)); print("intern:", benchmark(internCast)); print("String:"); benchmark(StringCast); print("new String:"); benchmark(newStringCast); print("toString:"); benchmark(toStringCast); print("-------------\nFloat to Int Conversion Test"); print("parseInt"); benchmark(ParseInt); print("Math.floor"); benchmark(MathFloor); print("floor") benchmark(Floor); function newObject(){ return new Object(); } function internObject(){ return {}; } print("------------\nliteral Test"); print("runtime new object", benchmark(newObject)); print("literal object", benchmark(internObject));
附錄2
代碼1:
for(var i=0;i<100;i++){ arr[i]=0; }
代碼2:
var i = 0; while(i < 100){ arr[i++]=0; }
代碼3:
var i = 0; while(i < 100){ arr[i]=0; i++; }
在firefox下測(cè)試這兩段代碼,結(jié)果是代碼2優(yōu)于代碼1和3,而代碼1一般優(yōu)于代碼3,有時(shí)會(huì)被代碼3超過(guò);而在IE 6.0下,測(cè)試壓力較大的時(shí)候(如測(cè)試10000次以上)代碼2和3則有時(shí)候優(yōu)于代碼1,有時(shí)候就會(huì)遠(yuǎn)遠(yuǎn)落后代碼1,而在測(cè)試壓力較小(如5000次),則代碼2>代碼3>代碼1。
代碼4:
var i = 0; var a; while(i < 100){ a = 0; i++; }
代碼5:
var a; for(var i=0;i<100;i++){ a = 0; }
上面兩段代碼在Firefox和IE下測(cè)試結(jié)果都是性能接近的。
代碼6:
var a; var i=0; while(i<100){ a=i; i++; }
代碼7:
var a; var i=0; while(i<100){ a=i++; }
代碼8:
var a; for(var i=0;i<100;i++){ a = i; }
代碼9:
var a; for(var i=0;i<100;){ a = i++; }
這四段代碼在Firefox下6和8的性能接近,7和9的性能接近,而6, 8 < 7, 9;
最后我們來(lái)看一下空循環(huán)
代碼10:
for(var i=0;i<100;i++){ }
代碼11:
var i; while(i<100){ i++; }
最后的測(cè)試出現(xiàn)了神奇的結(jié)果,F(xiàn)irefox下代碼10所花的時(shí)間與代碼11所花的大約是24:1。所以它不具備參考價(jià)值,于是我沒(méi)有放在一開(kāi)始給大家看。
- JavaScript中的apply()方法和call()方法使用介紹
- JS面向?qū)ο?、prototype、call()、apply()
- 淺談javascript中call()、apply()、bind()的用法
- 跟我學(xué)習(xí)javascript的call(),apply(),bind()與回調(diào)
- js繼承call()和apply()方法總結(jié)
- js中apply()和call()的區(qū)別與用法實(shí)例分析
- 基于JavaScript實(shí)現(xiàn)繼承機(jī)制之調(diào)用call()與apply()的方法詳解
- 深入理解關(guān)于javascript中apply()和call()方法的區(qū)別
- 淺談javascript的call()、apply()、bind()的用法
- JS中apply()的應(yīng)用實(shí)例分析
相關(guān)文章
基于JavaScript開(kāi)發(fā)一個(gè)有趣的分組抽簽小程序
在團(tuán)隊(duì)合作開(kāi)發(fā)中,經(jīng)常需要將團(tuán)隊(duì)成員分組,來(lái)完成各自的任務(wù),而抽簽的方式自然是最公平、最簡(jiǎn)單的方法之一,所以本文就來(lái)開(kāi)發(fā)一個(gè)有趣的分組抽簽小程序吧2023-05-05JS根據(jù)json數(shù)組多個(gè)字段排序及json數(shù)組常用操作
這篇文章主要介紹了js根據(jù)json數(shù)組多個(gè)字段排序及json數(shù)組常用操作,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06Bootstrap實(shí)現(xiàn)帶暫停功能的輪播組件(推薦)
最近小編在項(xiàng)目中用到了一款帶輪播組件,功能非常齊全,可以設(shè)置各種標(biāo)題樣式、動(dòng)畫(huà)效果、輪播時(shí)間、開(kāi)始暫停等功能,下面小編通過(guò)本文給大家詳細(xì)介紹下實(shí)現(xiàn)過(guò)程,需要的朋友參考下吧2016-11-11JavaScript組合模式學(xué)習(xí)要點(diǎn)
組合模式大概是設(shè)計(jì)模式里面使用最為廣泛的模式之一了,模式本身理解起來(lái)也比較簡(jiǎn)單,以至于可以毫不費(fèi)力的寫(xiě)出一個(gè)能用的組合模式偽代碼2016-08-08JavaScript中String和StringBuffer的速度之爭(zhēng)
很多Javascript書(shū)籍中都是類比于Java說(shuō)String在頻繁的和大量的字符串連接方面的效率是不如StringBuffer的。2010-04-04JavaScript中判斷頁(yè)面關(guān)閉、頁(yè)面刷新的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript中判斷頁(yè)面關(guān)閉、頁(yè)面刷新的實(shí)現(xiàn)代碼,在一些特殊的場(chǎng)合中會(huì)用到這個(gè)技術(shù),需要的朋友可以參考下2014-08-08JavaScript?算法實(shí)現(xiàn)復(fù)寫(xiě)0雙指針解法
這篇文章主要為大家介紹了JavaScript?算法?復(fù)寫(xiě)0雙指針解法,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11JS實(shí)現(xiàn)仿UC瀏覽器前進(jìn)后退效果的實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿UC瀏覽器前進(jìn)后退效果的實(shí)例代碼,實(shí)現(xiàn)此功能前需要先測(cè)試下瀏覽器,具體實(shí)例代碼,大家參考下本文2017-07-07