js教程-javascript最佳實(shí)踐性能

《js教程-javascript最佳實(shí)踐性能》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

1、JS教程-JavaScript最佳實(shí)踐：性能注意作用域避免全局查找一個(gè)例子：functionupdateUI(){varimgs=document.getElementByTagName("img");for(vari=0,len=imgs.length;iimgs[i].title=document.title+"image"+i;}varmsg=document.getElementById("msg");msg.innnerHTML="Updatecomplete.";}該函數(shù)可能看上去完全正常，但是它包含了三個(gè)對(duì)于全局document對(duì)

2、象的引用。如果在頁(yè)面上有多個(gè)圖片，那么for循環(huán)中的document引用就會(huì)被執(zhí)行多次甚至上百次，每次都會(huì)要進(jìn)行作用域鏈查找。通過(guò)創(chuàng)建一個(gè)指向document對(duì)象的局部變量，就可以通過(guò)限制一次全局查找來(lái)改進(jìn)這個(gè)函數(shù)的性能：functionupdateUI(){vardoc=document;varimgs=doc.getElementByTagName("img");for(vari=0,len=imgs.length;iimgs[i].title=doc.title+"image"+i;}varmsg=doc.getElementById("

3、msg");msg.innnerHTML="Updatecomplete.";}這里，首先將document對(duì)象存在本地的doc變量中;然后在余下的代碼中替換原來(lái)的document。與原來(lái)的版本相比，現(xiàn)在的函數(shù)只有一次全局查找，肯定更快。選擇正確方法1.避免不必要的屬性查找獲取常量值是非常高效的過(guò)程varvalue=5;varsum=10+value;alert(sum);該代碼進(jìn)行了四次常量值查找：數(shù)字5，變量value，數(shù)字10和變量sum。在JavaScript中訪問(wèn)數(shù)組元素和簡(jiǎn)單的變量查找效率一樣。所以以下代碼和前面的例子效率一樣：va

4、rvalue=[5,10];varsum=value[0]+value[1];alert(sum);對(duì)象上的任何屬性查找都比訪問(wèn)變量或者數(shù)組花費(fèi)更長(zhǎng)時(shí)間，因?yàn)楸仨氃谠玩溨袑?duì)擁有該名稱(chēng)的屬性進(jìn)行一次搜素。屬性查找越多，執(zhí)行時(shí)間就越長(zhǎng)。varvalues={first:5,second:10};varsum=values.first+values.second;alert(sum);這段代碼使用兩次屬性查找來(lái)計(jì)算sum的值。進(jìn)行一兩次屬性查找并不會(huì)導(dǎo)致顯著的性能問(wèn)題，但是進(jìn)行成百上千次則肯定會(huì)減慢執(zhí)行速度。注意獲取單個(gè)值的多重屬性查找。例如：va

5、rquery=window.location.href.substring(window.location.href.indexOf("?"));在這段代碼中，有6次屬性查找：window.location.href.substring()有3次，window.location.href.indexOf()又有3次。只要數(shù)一數(shù)代碼中的點(diǎn)的數(shù)量，就可以確定查找的次數(shù)了。這段代碼由于兩次用到了window.location.href，同樣的查找進(jìn)行了兩次，因此效率特別不好。一旦多次用到對(duì)象屬性，應(yīng)該將其存儲(chǔ)在局部變量中。之前的代碼可以如下重寫(xiě)：va

6、rurl=window.locaiton.href;varquery=url.substring(url.indexOf("?"));這個(gè)版本的代碼只有4次屬性查找，相對(duì)于原始版本節(jié)省了33%。一般來(lái)講，只要能減少算法的復(fù)雜度，就要盡可能減少。盡可能多地使用局部變量將屬性查找替換為值查找，進(jìn)一步獎(jiǎng)，如果即可以用數(shù)字化的數(shù)組位置進(jìn)行訪問(wèn)，也可以使用命名屬性(諸如NodeList對(duì)象)，那么使用數(shù)字位置。2.優(yōu)化循環(huán)一個(gè)循環(huán)的基本優(yōu)化步驟如下所示。(1)減值迭代——大多數(shù)循環(huán)使用一個(gè)從0開(kāi)始、增加到某個(gè)特定值的迭代器。在很多情況下，從最大值開(kāi)始，在

7、循環(huán)中不斷減值的迭代器更加高效。(2)簡(jiǎn)化終止條件——由于每次循環(huán)過(guò)程都會(huì)計(jì)算終止條件，所以必須保證它盡可能快。也就是說(shuō)避免屬性查找或其他操作。(3)簡(jiǎn)化循環(huán)體——循環(huán)是執(zhí)行最多的，所以要確保其最大限度地優(yōu)化，確保其他某些可以被很容易移除循環(huán)的密集計(jì)算。(4使用后測(cè)試循環(huán)——最常用for循環(huán)和while循環(huán)都是前測(cè)試循環(huán)。而如do-while這種后測(cè)試循環(huán)，可以避免最初終止條件的計(jì)算，因此運(yùn)行更快。以下是一個(gè)基本的for循環(huán)：for(vari=0;i

8、0遞增到values數(shù)組中的元素總數(shù)。循環(huán)可以改為i減值，如下所示：for(vari=value.length-1;i>=0;i--){process