實現(xiàn)JavaScript高性能的數(shù)據(jù)存儲
1.JavaScript中四種基本數(shù)據(jù)存取位置:字面量,本地變量,數(shù)組元素,對象成員。
一般來說:[字面量,局部變量]運行速度>[數(shù)組,對象成員]
2.內(nèi)部屬性包含了一個函數(shù)被創(chuàng)建的作用域中對象的集合。這個集合被稱為作用域鏈。
3.執(zhí)行函數(shù)->創(chuàng)建執(zhí)行環(huán)境->創(chuàng)建活動對象(即函數(shù)運行時變量對象)。
所以多次調(diào)用同一個函數(shù)會導致創(chuàng)建多個執(zhí)行環(huán)境。
4.函數(shù)執(zhí)行過程
每遇到一個變量都會經(jīng)歷一次標識符解析過程,從哪里獲取或存儲數(shù)據(jù)。該過程搜索執(zhí)行環(huán)境的作用域鏈。正是這種搜索過程影響了性能。
5.標識符解析的性能
全局變量總是存在于執(zhí)行環(huán)境作用域的最末端。局部變量是第一順位解析。
經(jīng)驗法則:如果某個跨作用域的值在函數(shù)中被引用一次以上,那么就把他存儲到局部變量中。
如:
function initUI(){ var bd=document.body; //后面有多次doucument這個全局對象的調(diào)用 } //->優(yōu)化后 function initUI(){ var doc=document; bd=doc.body; //把doucument這個全局對象的引用存儲到局部變量doc中 }
6.改變作用域鏈
一般來說,一個執(zhí)行環(huán)境的作用域鏈不會改變的。
<1>with可以臨時改變作用域鏈
width用來給對象的所有屬性創(chuàng)建一個變量
function initUI(){ with(document){ var bd=body; } }
當代碼執(zhí)行到with時,執(zhí)行環(huán)境的作用域鏈被臨時改變了。一個新的變量對象唄創(chuàng)建,它包含了參數(shù)指定對象的所有屬性。這個對象唄推入作用域鏈的首位,所以這時候所有的局部變量處于的哥第二個作用域鏈對象中,因此訪問代價更高了。
<2>try-catch
try語句發(fā)生錯誤的時候,執(zhí)行過程會自動跳轉(zhuǎn)到catch中。然后把異常對象推入一個變量對象并置于作用域的首位。
注意:一旦catch子語句執(zhí)行完畢,作用域鏈就會返回到之前的狀態(tài)。
7.閉包引發(fā)的性能問題
閉包是JavaScript最強大的特性之一。
由于閉包包含了執(zhí)行了與環(huán)境作用域鏈相同對象的引用,函數(shù)的活動對象不會被銷毀,造成更多的內(nèi)存開銷。
關注的性能點:頻繁訪問跨作用域的標識符時,每次訪問都會帶來性能損失。
Start:19:41:45 2015-11-21 引用自by Aaron:http://www.cnblogs.com/aaronjs/p/3370176.html
8.內(nèi)存泄露
內(nèi)存泄露是指一塊被分配的內(nèi)存既不能使用,又不能回收,直到瀏覽器進程結(jié)束。在C++中,因為是手動管理內(nèi)存,內(nèi)存泄露是經(jīng)常出現(xiàn)的事情。而現(xiàn)在流行的C#和Java等語言采用了自動垃圾回收方法管理內(nèi)存,正常使用的情況下幾乎不會發(fā)生內(nèi)存泄露。瀏覽器中也是采用自動垃圾回收方法管理內(nèi)存,但由于瀏覽器垃圾回收方法有bug,會產(chǎn)生內(nèi)存泄露。
內(nèi)存泄露的幾種情況
- 循環(huán)引用
- Javascript閉包
- DOM插入順序
一個DOM對象被一個Javascript對象引用,與此同時又引用同一個或其它的Javascript對象,這個DOM對象可能會引發(fā)內(nèi)存泄漏。這個DOM對象的引用將不會在腳本停止的時候被垃圾回收器回收。要想破壞循環(huán)引用,引用DOM元素的對象或DOM對象的引用需要被賦值為null。
具體的就深入討論了,這里的總結(jié)
- JS的內(nèi)存泄露,無怪乎就是從DOM中remove了元素,但是依然有變量或者對象引用了該DOM對象。然后內(nèi)存中無法刪除。使得瀏覽器的內(nèi)存占用居高不下。這種內(nèi)存占用,隨著瀏覽器的刷新,會自動釋放。
- 而另外一種情況,就是循環(huán)引用,一個DOM對象和JS對象之間互相引用,這樣造成的情況更嚴重一些,即使刷新,內(nèi)存也不會減少。這就是嚴格意義上說的內(nèi)存泄露了。
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
- 總結(jié)JavaScript三種數(shù)據(jù)存儲方式之間的區(qū)別
- JavaScript數(shù)據(jù)存儲 Cookie篇
- 關于AngularJs數(shù)據(jù)的本地存儲詳解
- JavaScript數(shù)據(jù)類型的存儲方法詳解
- JavaScript筆記之數(shù)據(jù)屬性和存儲器屬性
- 高性能Javascript筆記 數(shù)據(jù)的存儲與訪問性能優(yōu)化
- js 數(shù)據(jù)存儲和DOM編程
- javascript 數(shù)據(jù)存儲的常用函數(shù)總結(jié)
- JavaScript使用localStorage存儲數(shù)據(jù)
相關文章
JS獲取屏幕,瀏覽器窗口大小,網(wǎng)頁高度寬度(實現(xiàn)代碼)
本篇文章主要介紹了JS獲取屏幕,瀏覽器窗口大小,網(wǎng)頁高度寬度的實現(xiàn)代碼。需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12基于JS實現(xiàn)PHP的sprintf函數(shù)實例
這篇文章主要介紹了基于JS實現(xiàn)PHP的sprintf函數(shù)的方法,可實現(xiàn)JavaScript模擬PHPsprintf函數(shù)的輸出功能,涉及JavaScript字符串操作的相關技巧,需要的朋友可以參考下2015-11-11兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js
這篇文章主要介紹了通過兩種方法實現(xiàn)在HTML頁面加載完畢后運行某個js,需要的朋友可以參考下2014-06-06最好用的省市二級聯(lián)動 原生js實現(xiàn)你值得擁有
省市二級聯(lián)動效果,實現(xiàn)方法有很多,不過其他文章中介紹的都比較籠統(tǒng),在本文有一個詳細的實現(xiàn)過程,使用原生js很容易理解,希望大家可以參考下2013-09-09layui實現(xiàn)動態(tài)和靜態(tài)分頁
本篇文章通過實例給大家分享了layui實現(xiàn)動態(tài)和靜態(tài)分頁的詳細方法,以及效果展示,有需要的朋友可以跟著參考學習下。2018-04-04