前端優化-Javascript篇(3.標識符查找優化)

KaltZK 發布于2019-08-19 14:53 / 2902人閱讀

摘要：下面我跟大家分享關于標識符查找方面的優化問題。這個變量對象會首先被放入作用域鏈中。執行上下文也有一個作用域鏈，這個作用域鏈就是用來進行變量查找的。當執行上下文創建時，它的作用域鏈會用函數的屬性來初始化。

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

函數中變量的查找 作用域鏈

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

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

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

var sum = add(1,2) ;

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

作用域擴大

　　對于正常的情況，函數執行上下文的作用域在函數執行的時候是不會發生變化的，但是有幾個特例情況會使作用域發生變化，這種現象叫做動態作用域。

with

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

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

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

try catch

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

eval

　　eval函數的壞處我想大家都應該知道了，通過eval執行的代碼會污染全局變量,進而也會拉長變量的查找深度。

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

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

　　關于原型鏈的介紹網上已經有很多了，我這里就不做介紹了。Javascript中的繼承是通過原型鏈實現的，這就會導致一個問題，就是經過多次繼承之后，原型鏈會變得很長，然后對于對象屬性的查找就需要遍歷更長的原型鏈，而遍歷的越深效率必然就會越低。這就是對象屬性查找的時候需要優化的一個地方。

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

總結

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

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

GPU云服務器云服務器前端優化網頁前端優化前端頁面優化前端代碼優化

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/78157.html

前端優化-Javascript篇(4.DOM優化)

摘要：優化策略跟上面的大同小異，就是用局部變量緩存集合以及集合的長度，我就不進行實際測試了。例如錯誤的做法使用修改來進行優化如果需要動態修改，那么就使用批量處理操作并且讓元素脫離文檔流，等操作結束后再放回文檔流中。上篇我介紹了Javascript標識符查找方面的優化，可以看出在這方面的優化給性能帶來的提升并不明顯，甚至可以說基本沒有影響。但是，我今天要分享的是前端Javascript優化的...

Prasanta 2019-08-21 12:21 評論0 收藏0
《高性能JavaScript》讀書筆記

摘要：除此以外，讓元素脫離文檔流也是一個很好的方法。因為元素一旦脫離文檔流，它對其他元素的影響幾乎為零，性能的損耗就能夠有效局限于一個較小的范圍。講完重排與重繪，往元素上綁定事件也是引起性能問題的元兇。高性能這本書非常精致，內容也非常豐富。 showImg(https://segmentfault.com/img/bVJgbt?w=600&h=784); 入手《高性能JavaScript》一...

W_BinaryTree 2019-08-21 15:12 評論0 收藏0
前端性能優化JavaScript篇

摘要：減少作用域鏈上的查找次數。盡量少用全局變量，盡量使用局部變量。全局變量如果不手動銷毀，會一直存在，造成全局變量污染，可能很產生一些意想不到的錯誤，而局部變量運行完成后，就被會被回收使用代替大量的內聯樣式修改。性能優化還需要繼續深入研究。關于前端性能優化的討論一直都很多，包羅的知識也很多，可以說性能優化只有更好，沒有最好。前面我寫了一篇關于css優化的總結文章，今天再從javascri...

chuyao 2019-08-30 15:55 評論0 收藏0
前端性能優化JavaScript篇

摘要：減少作用域鏈上的查找次數。盡量少用全局變量，盡量使用局部變量。全局變量如果不手動銷毀，會一直存在，造成全局變量污染，可能很產生一些意想不到的錯誤，而局部變量運行完成后，就被會被回收使用代替大量的內聯樣式修改。性能優化還需要繼續深入研究。關于前端性能優化的討論一直都很多，包羅的知識也很多，可以說性能優化只有更好，沒有最好。前面我寫了一篇關于css優化的總結文章，今天再從javascri...

guqiu 2019-08-02 14:03 評論0 收藏0
前端性能優化JavaScript篇

摘要：減少作用域鏈上的查找次數。盡量少用全局變量，盡量使用局部變量。全局變量如果不手動銷毀，會一直存在，造成全局變量污染，可能很產生一些意想不到的錯誤，而局部變量運行完成后，就被會被回收使用代替大量的內聯樣式修改。性能優化還需要繼續深入研究。關于前端性能優化的討論一直都很多，包羅的知識也很多，可以說性能優化只有更好，沒有最好。前面我寫了一篇關于css優化的總結文章，今天再從javascri...

testbird 2019-08-23 14:37 評論0 收藏0