丨快屬性和慢v8采用了哪些策略提升對(duì)象的訪問速度

線性結(jié)構(gòu)和非線性結(jié)今天這節(jié)課我們就來分析下V8采用了哪些策略提升了對(duì)象屬性的速度(properties在開始之前，我們先來了解什么是對(duì)象中的常規(guī)屬性和排序?qū)傩?，你可以先參考下面這樣一代代123456789function{this[100]='test-100'this[1]='test-this["B"]='bar-B'this[50]='test-50'this[9]='test-9'this[8]='test-this[3]='test-this[5]='test-this["A"]='bar-this["C"]='bar-}for(keyinbar){}在上面這段代碼中，我們利用構(gòu)造函數(shù)Foo建了一個(gè)bar象，在構(gòu)造函數(shù)中，我們給bar對(duì)象設(shè)置了很多屬性，包括了數(shù)字屬性和字符串屬性，然后我們枚舉出來了bar對(duì)象代代index:1value:test-index:3value:test-index:5value:test-index:8value:test-index:9value:test-index:50value:test-index:100value:test-index:Bvalue:bar-index:Avalue:bar-index:Cvalue:bar-觀察這段打印出來的數(shù)據(jù)，我們發(fā)現(xiàn)打印出來的屬性順序并不是我們?cè)O(shè)置的順序，我們?cè)O(shè)置屬性的時(shí)候是亂序設(shè)置的，比如開始先設(shè)置100然后有設(shè)置了1，但是輸出的內(nèi)容卻非常規(guī)律，總的來說體現(xiàn)在以下兩點(diǎn)：設(shè)置的數(shù)字屬性被最先打印出來了，并且按照數(shù)字大小的順序打印設(shè)置的字符串屬性依然是按照之前的設(shè)置順序打印的，比如我們是按照B、A、C的順序 之所以出現(xiàn)這樣的結(jié)果，是因?yàn)樵贓CMAScript范中定義了數(shù)字屬性應(yīng)該按照索引值大在這里我們把對(duì)象中的數(shù)字屬性稱為排序?qū)傩?，在V8被稱為elements，字符串屬性就被稱為常規(guī)屬性，在V8中被稱為properties。在V8內(nèi)部，為了有效地提升和這兩種屬性的性能，分別使用了兩個(gè)線性數(shù)據(jù)結(jié)構(gòu)V8內(nèi)部的對(duì)象構(gòu)通過上圖我們可以發(fā)現(xiàn)，bar對(duì)象包含了兩個(gè)隱藏屬性：elements屬性和properties屬性，elements屬性指向了elements對(duì)象，在elements對(duì)象中，會(huì)按照順序存放排序?qū)傩裕琾roperties屬性則指向了properties對(duì)象，在properties對(duì)象中，會(huì)按照創(chuàng)建時(shí)的分解成這兩種線性數(shù)據(jù)結(jié)構(gòu)之后，如果執(zhí)行索引操作，那么V8會(huì)先從elements屬性中按照順序所有的元素，然后再在properties屬性中所有的元素，這樣就完成一次索將不同的屬性分別保存到elements屬性和properties屬性中，無疑簡(jiǎn)化了程序的復(fù)雜度，但是在查找元素時(shí)，卻多了一步操作，比如執(zhí)行bar.B這個(gè)語句來查找B的屬性值，那么在V8會(huì)先查找出properties屬性所指向的對(duì)象properties，然后再在properties對(duì)象中查找B屬性，這種方式在查找過程中增加了一步操作，因此會(huì)影響到元素的查找效率基于這個(gè)原因，V8取了一個(gè)權(quán)衡的策略以加快查找屬性的效率，這個(gè)策略是將部分常規(guī)屬性直接到對(duì)象本身，我們把這稱為對(duì)象內(nèi)屬性(in-objectproperties)。對(duì)象在內(nèi)對(duì)象內(nèi)屬采用對(duì)象內(nèi)屬性之后，常規(guī)屬性就被保存到bar對(duì)象本身了，這樣當(dāng)再次使用bar.B來查找B的屬性值時(shí)，V8就可以直接從bar對(duì)象本身去獲取該值就可以了，這種方式減少查找不過對(duì)象內(nèi)屬性的數(shù)量是固定的，默認(rèn)是10，如果添加的屬性超出了對(duì)象分配的空間，通常，保存性數(shù)據(jù)結(jié)構(gòu)中的屬性稱之為“快屬性”，因?yàn)榫€性數(shù)據(jù)結(jié)構(gòu)中只需要通過索引即可以到屬性，雖然線性結(jié)構(gòu)的速度快，但是如果從線性結(jié)構(gòu)中添加或者刪除大量的屬性時(shí)，則執(zhí)行效率會(huì)非常低，這主要因?yàn)闀?huì)產(chǎn)生大量時(shí)間和內(nèi)存開銷。 為就會(huì)采取另外一種策略，那就是“慢屬性”策略，但慢屬性的對(duì)象內(nèi)部會(huì)有獨(dú)立的非線性數(shù)據(jù)結(jié)構(gòu)(詞典)作為屬性容器。所慢屬性是如何Chrome現(xiàn)在我們知道了V8是怎么對(duì)象的了，接下來我們來結(jié)合Chrome中的內(nèi)存快照，來你可以打開Chrome開發(fā)者工具，先選擇控制臺(tái)，然后在控制臺(tái)中執(zhí)行以下代碼查看functionFoo(property_num,element_num)for(leti=0;i<element_num;i++)this[i]= for(leti=0;i<property_num;i++)letppt=this[ppt]= 111112varbar=new了兩個(gè)參數(shù)property_num、element_num，分別代表創(chuàng)建常規(guī)屬性的個(gè)數(shù)和排序?qū)傩缘膫€(gè)數(shù)，我們先將這兩種類型的個(gè)數(shù)都設(shè)置為10個(gè)，然后利用該構(gòu)造函數(shù)創(chuàng)建了一個(gè)新的bar對(duì)象。Chrome開發(fā)者工具切換到Memory，然后點(diǎn)擊左側(cè)的小圓圈就可以捕獲當(dāng)前的內(nèi)存輸入構(gòu)造函數(shù)Foo，Chrome會(huì)列出所有經(jīng)過構(gòu)造函數(shù)Foo創(chuàng)建的對(duì)象，如下圖所示：從內(nèi)存快照搜索觀察上圖，我們搜索出來了所有經(jīng)過構(gòu)造函數(shù)Foo創(chuàng)建的對(duì)象，點(diǎn)開Foo的那個(gè)下拉列表，第一個(gè)就是剛才創(chuàng)建的bar象，我們可以看到bar象有一個(gè)elements性，這這是因?yàn)橹粍?chuàng)建了10常規(guī)屬性，所以V8這些常規(guī)屬性直接做成了bar象的對(duì)象內(nèi)所以這時(shí)候的數(shù)據(jù)內(nèi)存布局是這樣10常規(guī)屬性作為對(duì)象內(nèi)屬性，存放在bar數(shù)內(nèi)部10排序?qū)傩源娣旁趀lements接下來我們可以將創(chuàng)建的對(duì)象屬性的個(gè)數(shù)調(diào)整到20，你可以在控制臺(tái)執(zhí)行下面這段代1varbar2=new然后我們?cè)僦匦律蓛?nèi)存快照，再來看看生成的利用構(gòu)造函數(shù)生我們可以看到，構(gòu)造函數(shù)Foo面已經(jīng)有了兩個(gè)對(duì)象了，其中一個(gè)bar，另外一個(gè)是bar2，我們點(diǎn)開第一個(gè)bar2對(duì)象，內(nèi)容如下所示：由于創(chuàng)建的常用屬性超過了10個(gè)，所以另外10個(gè)常用屬性就被保存到properties中了，注意因?yàn)閜roperties只有10屬性，所以依然是線性的數(shù)據(jù)結(jié)構(gòu)，我們可以看其所以這時(shí)候?qū)傩缘膬?nèi)存布局是這樣10屬性直接存放在bar2的對(duì)象內(nèi)10常規(guī)屬性以線性數(shù)據(jù)結(jié)構(gòu)的方式存放在properties性里面10個(gè)數(shù)字屬性存放在elements屬性里面。如果常用屬性太多了，比如創(chuàng)建了100，那么我們?cè)賮砜纯雌鋬?nèi)存分布，你可以執(zhí)行下1varbar3=new然后以同樣的方式打 bar3，查看其內(nèi)存布局，最終如下圖所示利用字典存放常規(guī)元結(jié)合上圖，我們可以看到，這時(shí)候的properties屬性里面的數(shù)據(jù)并不是線性的，而是10屬性直接存放在bar3的對(duì)象內(nèi)90個(gè)常規(guī)屬性以非線性字典的這種數(shù)據(jù)結(jié)構(gòu)方式存放在properties屬性里面10個(gè)數(shù)字屬性存放在elements屬性里好了，現(xiàn)在我們知道V8是怎么對(duì)象的了，不過這里還有幾個(gè)重要的隱藏屬性我還沒有觀察上圖，除了elements和properties屬性，V8還為每個(gè)對(duì)象實(shí)現(xiàn)了map屬性和 屬性。proto 屬性就是原型，是用來實(shí)現(xiàn)JavaScript繼承的，我們會(huì)在下一節(jié)來介紹；而map則是隱藏類，我們會(huì)在《15|隱藏類：如何在內(nèi)存中快速查找對(duì)象屬好了，本節(jié)的內(nèi)容就介紹到這里，下面我來總結(jié)下本文的主要內(nèi)本文我們的主要目標(biāo)是介紹V8內(nèi)部是如何對(duì)象的，因?yàn)镴avaScript中的對(duì)象是由一為了提升查找效率，V8在對(duì)象中添加了兩個(gè)隱藏屬性，排序?qū)傩院统Ｒ?guī)屬性，指向了elements象，在elements象中，會(huì)按照順序存放排序?qū)傩浴roperties性則指向了properties對(duì)象，在properties對(duì)象中，會(huì)按照創(chuàng)建時(shí)的順序保存常規(guī)屬性。通過引入這兩個(gè)屬性，加速了V8查找屬性的速度，為了更加進(jìn)一步提升查找效率，V8還實(shí)現(xiàn)了內(nèi)置內(nèi)屬性的策略，當(dāng)常規(guī)屬性少于一定數(shù)量時(shí)，V8就會(huì)將這些常規(guī)屬性直接寫對(duì)象中，這樣又節(jié)省了一個(gè)中間步但是如果對(duì)象中的屬性過多時(shí)，或者存在反復(fù)添加或者刪除屬性的操作，那么V8就會(huì)將線性的模式降級(jí)為非線性的字典模式，這樣雖然降低了查找速度，但是卻提升了修改通常，我們不建議使用delete刪除屬性，你能結(jié)合文中介紹的快屬性和慢屬性，給出不建議使用delete的原因嗎？歡迎你在留言區(qū)與我討論。感謝你的閱讀，如果你覺得這篇文章對(duì)你有所啟發(fā)，也歡迎把它給你的朋友 不得售賣。頁面已增加防盜追蹤，將依 上一篇02|函數(shù)即對(duì)象：一篇文章徹底搞懂JavaScript下一篇04|精選留言 展5Chrome80memory20properties10個(gè)，但是20bar100properties就更詭異了，每個(gè)都有2200，bar100展1414展4 3proprts存的屬性y是字符串，應(yīng)該不可能是數(shù)組存。要不就是鏈表，要不就是hash表。如果是hash表里由于導(dǎo)致的過長(zhǎng)鏈表換成查找樹。…展2執(zhí)行完例子后有些疑惑，找到了v8引擎原博客中找"Thenumberofin-objectpropertiesispredeterminedbytheinitialsizeoftheobjein-objectpropertiessize展111