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