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

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