前端優(yōu)化-Javascript篇(3.標(biāo)識符查找優(yōu)化)

KaltZK 發(fā)布于2019-08-19 14:53 / 2906人閱讀

摘要：下面我跟大家分享關(guān)于標(biāo)識符查找方面的優(yōu)化問題。這個變量對象會首先被放入作用域鏈中。執(zhí)行上下文也有一個作用域鏈，這個作用域鏈就是用來進(jìn)行變量查找的。當(dāng)執(zhí)行上下文創(chuàng)建時，它的作用域鏈會用函數(shù)的屬性來初始化。

　　前面兩篇文章介紹了Javascript文件在頁面中位置以及異步加載問題對前端性能的影響。不過受限于單線程的原因，不管采用哪種方法，只要Javascript進(jìn)行了耗時的工作，就都會引起頁面的阻塞。所以在寫代碼的過程中應(yīng)該注意一些會影響代碼性能的問題，這樣才能讓我們的優(yōu)化盡量做到極致。下面我跟大家分享關(guān)于標(biāo)識符查找方面的優(yōu)化問題。
　　

函數(shù)中變量的查找 作用域鏈

　　每個函數(shù)都有一個[[Scope]]屬性，指向函數(shù)的作用域鏈，作用域鏈由多個變量對象組成。這個作用域鏈在函數(shù)定義的時候被創(chuàng)建，在函數(shù)定義時，會創(chuàng)建一個變量對象，這個變量對象包括了函數(shù)包含塊所能訪問到的變量，其實(shí)就是函數(shù)包含塊的執(zhí)行上下文。這個變量對象會首先被放入作用域鏈中。

function add(num1,num2){
    var sum = num1 + num2 ;
    return sum ;
}

　　在函數(shù)執(zhí)行的時候，會創(chuàng)建一個叫做執(zhí)行上下文的對象，這個執(zhí)行上下文會用來進(jìn)行函數(shù)的變量查找。執(zhí)行上下文也有一個作用域鏈，這個作用域鏈就是用來進(jìn)行變量查找的。當(dāng)執(zhí)行上下文創(chuàng)建時，它的作用域鏈會用函數(shù)的[[Scope]]屬性來初始化。創(chuàng)建完執(zhí)行上下文之后，又會創(chuàng)建一個叫做活動對象的變量對象并且放入作用域鏈的頭部。這個活動對象包括所有局部變量，函數(shù)參數(shù)，arguments和this。這也說明了一個問題，就是this的值是在運(yùn)行的時候決定的，而不是定義的時候。

var sum = add(1,2) ;

　　每次進(jìn)行變量查找時，我們都要遍歷執(zhí)行上下文的作用域鏈，直到找到為止或者返回undefined。在這個過程中，變量查找的深度就會對性能產(chǎn)生影響。變量查找得越深，性能就越低。
　　由于現(xiàn)代瀏覽器對于JS的執(zhí)行已經(jīng)進(jìn)行了優(yōu)化，所以經(jīng)過我的測試發(fā)現(xiàn)，變量查找的優(yōu)化對于性能的提升不會產(chǎn)生太大的影響。雖然這么說，但是關(guān)于變量查找的優(yōu)化方法還是可以借鑒的。

作用域擴(kuò)大

　　對于正常的情況，函數(shù)執(zhí)行上下文的作用域在函數(shù)執(zhí)行的時候是不會發(fā)生變化的，但是有幾個特例情況會使作用域發(fā)生變化，這種現(xiàn)象叫做動態(tài)作用域。

with

　　　with語句用來在特定作用域中引入變量對象，比如下面這段代碼:

function test(){
    with(document){
        var link = getElementsByTagName("a") ;
    }
}

　　通過with語句，在with作用域內(nèi)的代碼都可以直接訪問document中的屬性和方法。這個方法雖然可以方便得訪問屬性，但是也帶來了一些副作用。在使用with語句時，會向函數(shù)執(zhí)行上下文的作用域鏈的頭部插入一個變量對象，這個變量對象的值就是with中包含的對象，這就意味著原來在作用域中的變量對象都被往后移了一位，也就是說查找這些變量要遍歷更深一層作用域鏈。所以我們應(yīng)該盡量避免使用with語句，可以通過聲明局部變量然后賦值為document的方式來取代with語句。

try catch

　　try catch語句跟with一樣，也會產(chǎn)生同樣的影響，只是這次插入到作用域鏈中的變量對象是catch括號中的對象，一般就是錯誤對象e。

eval

　　eval函數(shù)的壞處我想大家都應(yīng)該知道了，通過eval執(zhí)行的代碼會污染全局變量,進(jìn)而也會拉長變量的查找深度。

對象屬性查找 原型和原型鏈

　　每個對象都有一個指向原型prototype的屬性__proto__，多個對象的繼承就形成了原型鏈。下圖是一個關(guān)于原型和原型鏈的圖：

　　關(guān)于原型鏈的介紹網(wǎng)上已經(jīng)有很多了，我這里就不做介紹了。Javascript中的繼承是通過原型鏈實(shí)現(xiàn)的，這就會導(dǎo)致一個問題，就是經(jīng)過多次繼承之后，原型鏈會變得很長，然后對于對象屬性的查找就需要遍歷更長的原型鏈，而遍歷的越深效率必然就會越低。這就是對象屬性查找的時候需要優(yōu)化的一個地方。

　　上圖是一個book對象的原型繼承圖，很容易發(fā)現(xiàn)如果要訪問title屬性那么只要直接再book對象上查找就可以了，但是如果要訪問toString方法的話，那么就需要遍歷到原型鏈最深處，這樣的話效率肯定更低。一個常用的優(yōu)化的方法就是用局部變量來保存對象的屬性，后面只要直接訪問這個局部變量就可以了。這方法跟函數(shù)中變量查找是一個道理。
　　現(xiàn)代瀏覽器對于對象屬性的查找同樣進(jìn)行了優(yōu)化，所以通過測試性能方面也沒有太大的差別。
　　

總結(jié)

　　上面所說的是Javascript代碼優(yōu)化方面常見的兩個問題，雖然現(xiàn)代瀏覽器對它們都進(jìn)行了優(yōu)化，但是如果要適配一些比較老舊的瀏覽器的話，還是需要注意的。而且上面說到的優(yōu)化策略也是一個很好的編程規(guī)范。

最后，安利下我的個人博客，歡迎訪問: http://bin-playground.top