自從JavaScript誕生以來(lái)，用這門語(yǔ)言編寫網(wǎng)頁(yè)的開發(fā)人員有了極大的增長(zhǎng)娱挨。與此同時(shí)余指，JavaScript代碼的執(zhí)行效率也越來(lái)越受到關(guān)注。只因JavaScript是一種解釋型語(yǔ)言跷坝，執(zhí)行速度要比編譯型語(yǔ)言慢的多酵镜。雖然很多主流的瀏覽器陸續(xù)實(shí)現(xiàn)了JavaScript的編譯執(zhí)行碉碉，不過(guò)還是有些方法可以改進(jìn)代碼的整體性能的
- 避免全局查找
優(yōu)化腳本性能最重要的就是注意全局查找。全局變量和函數(shù)肯定要比局部的開銷更大淮韭，因?yàn)樯婕白饔糜蜴溕系牟檎?/li>
function updateUI() {
var imgs = document.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
imgs[i].title = document.title + " image " + i;
}
var msg = document.getElementById("msg");
msg.innerHTML = "Update complete.";
}
大家仔細(xì)觀察一下誉裆，這就是我們平時(shí)寫的函數(shù)對(duì)不對(duì)，很正常缸濒，沒(méi)有什么問(wèn)題足丢；但是它包含了三個(gè)對(duì)于全局document對(duì)象的引用。如果頁(yè)面上有多個(gè)圖片庇配，那么for循環(huán)中的document引用就會(huì)被執(zhí)行多次甚至上百次斩跌，每次都需要作用域鏈去查找，就會(huì)影響性能捞慌。我們可以修改成一下方式：
function updateUI() {
var doc = documnet;
var imgs = doc.getElementsByTagName("img");
for (var i=0, len=imgs.length; i < len; i++){
imgs[i].title = doc.title + " image " + i;
}
var msg = document.getElementById("msg");
msg.innerHTML = "Update complete.";
}
這里耀鸦，首先將document對(duì)象保存在本地的doc變量中；然后在余下的代碼中替換原來(lái)的document啸澡。與原來(lái)相比袖订，現(xiàn)在的函數(shù)只有一次全局查找，肯定更快
總結(jié)：將在一個(gè)函數(shù)中會(huì)用到多次的全局對(duì)象存儲(chǔ)為局部局部變量總是沒(méi)有錯(cuò)的啦
- 避免with語(yǔ)句
在性能非常重要的地方一定要避免witch語(yǔ)句嗅虏。和函數(shù)相類似洛姑，with語(yǔ)句會(huì)創(chuàng)建自己的作用域，因此會(huì)增加執(zhí)行的代碼的作用域的長(zhǎng)度皮服。由于額外的作用域鏈查找楞艾，在with語(yǔ)句中執(zhí)行的代碼肯定會(huì)比外面的代碼要慢 - 避免不必要的屬性查找
我們平時(shí)在定義一個(gè)變量的時(shí)候，會(huì)這樣寫：
var value = [5,10]
var sum = values[0] + values[10]
使用變量和數(shù)組要比訪問(wèn)對(duì)象上的屬性更加有效率龄广，因?yàn)閷?duì)象是一個(gè)O(n)操作硫眯，對(duì)象上的任何屬性查找都要比訪問(wèn)變量或者數(shù)組花費(fèi)更長(zhǎng)的時(shí)間，因?yàn)楸仨氃谠玩溨袑?duì)擁有改名稱的屬性進(jìn)行一次搜索择同。其實(shí)就是屬性查找越多两入，執(zhí)行時(shí)間越長(zhǎng)。如果我們寫成這樣：
var values = {first: 5, second: 10};
var sum = values.first + values.second;
這段代碼使用了兩次屬性查找來(lái)計(jì)算sum的值敲才。其實(shí)進(jìn)行一兩次屬性查找并不會(huì)導(dǎo)致顯著的性能問(wèn)題裹纳，但是次數(shù)多了就會(huì)減慢執(zhí)行速度，所以最好不要用這樣的方法归斤。
你再比如說(shuō)這樣的寫法：
var query = window.location.href.substring(window.location.href.indexOf("?"))
通過(guò)上面的代碼痊夭，我們可以看出有6次屬性查找；window.location.href.substring有3次屬性查找脏里，window.location.href.indexOf有三次屬性查找她我，只要通過(guò)數(shù)點(diǎn)的數(shù)量我們就知道查找次數(shù)了。這段代碼都用到了window.location.href，這樣進(jìn)行兩次查找番舆，效果特別不好酝碳。所以我們可以改成這樣：
var url = window.location.href;
var query = url.substring(url.indexOf("?"));
這樣寫的話，查找次數(shù)就會(huì)減少到4次恨狈，相比上個(gè)版本減少到33%疏哗。
通過(guò)這樣簡(jiǎn)單的優(yōu)化，會(huì)為我們的項(xiàng)目性能提升很多禾怠，接下來(lái)會(huì)繼續(xù)從性能優(yōu)化方面剖析
