編程語言編譯器開發(fā)工具【免費下載鏈接】boaBoa is an embeddable Javascript engine written in Rust.項目地址https://gitcode.com/gh_mirrors/bo/boa點擊查看免費下載對象 Shapes隱藏類是現(xiàn)代 JavaScript 引擎實現(xiàn)快速屬性訪問的核心數(shù)據(jù)結(jié)構(gòu)。本文以 Boa用 Rust 編寫的可嵌入式 JavaScript 引擎的官方文檔 docs/shapes.md 為主線通過完整的 JavaScript 示例與逐步演進的形狀Shape鏈圖解系統(tǒng)講解 Root Shape、PropertyTable、屬性插入 / 刪除 / 屬性描述符變更等轉(zhuǎn)換transition的底層原理并結(jié)合 core/engine/src/object/shape 目錄下的真實源碼SharedShape、UniqueShape、PropertyTable、Slot、ForwardTransition 等進行源碼級印證。讀完本文你將能理解 Boa 如何用隱藏類加速對象屬性訪問、屬性表為何會分叉、刪除屬性時如何回滾重建轉(zhuǎn)換鏈以及隱藏類與 GC、內(nèi)聯(lián)緩存inline cache之間的關(guān)系。為什么要研究對象 Shapes在 JavaScript 中對象本質(zhì)上是動態(tài)的可以在運行時任意添加、刪除、修改屬性這與靜態(tài)語言中結(jié)構(gòu)固定的對象截然不同。如果每次屬性訪問都走一遍字符串鍵 → 哈希查找的路徑性能會大打折扣。Shapes也叫隱藏類Hidden Classes的核心思想是把對象的形狀有哪些屬性、每個屬性的描述符、它們在對象存儲中的位置從對象本身中剝離出來作為獨立的結(jié)構(gòu)Shape共享給所有形狀相同的對象。這樣一來擁有相同 Shape 的對象可以共享同一份屬性描述信息無需各自保存屬性訪問只需要Shape 中查找屬性 → 得到存儲槽位索引 → 直接訪問對象存儲數(shù)組接近數(shù)組索引訪問的速度屬性按插入順序連續(xù)排列在對象內(nèi)部的緊湊存儲dense storage中for...in、Object.keys()等按插入順序遍歷的操作也能高效完成。Boa 中 Shapes 的實現(xiàn)位于 core/engine/src/object/shape/mod.rs其中Shape是一個對內(nèi)部兩種變體的統(tǒng)一抽象enum Inner { Unique(UniqueShape), Shared(SharedShape), }即 Shape 分為**共享形狀SharedShape與唯一形狀UniqueShape**兩類后文會詳細說明兩者的分工。一切從 Root Shape 開始官方文檔用實例來解釋 Shapes 機制一切始于Root Shape根形狀Root Shape 是整個轉(zhuǎn)換鏈transition chain的起點它帶有一個指向PropertyTable的指針。從源碼看root_shape.rs 中的RootShape本質(zhì)上是SharedShape的包裝pub struct RootShape { shape: SharedShape, }而SharedShape::root()見 shared_shape/mod.rs創(chuàng)建的根形狀具有這些特征pub(crate) fn root() - Self { Self::new(Inner { forward_transitions: ForwardTransition::default(), prototype: None, // 根形狀沒有原型 property_count: 0, // 屬性計數(shù)為 0 // Most of the time the root shape initiates with between 1-4 properties. property_table: PropertyTable::with_capacity(4), previous: None, // 根形狀沒有 previous flags: ShapeFlags::default(), transition_count: 0, }) }注意根形狀的PropertyTable初始容量為 4這是基于大多數(shù)對象初始就有 14 個屬性的經(jīng)驗假設(shè)源碼注釋中明確說明。說明為便于閱讀文檔約定用S 數(shù)字來標(biāo)注各個形狀例如S0、S1。下文沿用這一約定。空對象從根形狀轉(zhuǎn)換到帶原型的形狀現(xiàn)在看一段最簡單的 JavaScript 代碼let o {};執(zhí)行后生成的轉(zhuǎn)換鏈如下這里發(fā)生了原型轉(zhuǎn)換prototype transition對象o獲得了S1形狀。根形狀沒有原型因此需要轉(zhuǎn)換到一個把Object.prototype作為__proto__的新形狀?？梢钥吹絊1繼承了根形狀的PropertyTable——注意這里的繼承指的是多個形狀共享同一個 PropertyTable 引用而不是復(fù)制了一份。源碼中對應(yīng)的是change_prototype_transitionpub(crate) fn change_prototype_transition(self, prototype: JsPrototype) - Self { // 如果之前已經(jīng)創(chuàng)建過同樣的轉(zhuǎn)換直接復(fù)用 if let Some(shape) self.forward_transitions().get_prototype(prototype) { ... } let new_inner_shape Inner { forward_transitions: ForwardTransition::default(), prototype: prototype.clone(), property_table: self.property_table().clone(), // 繼承屬性表 property_count: self.property_count(), previous: Some(self.clone()), transition_count: self.transition_count() 1, flags: ShapeFlags::prototype_transition_from(self.flags()), }; ... }可以看到新形狀的property_table直接clone自當(dāng)前形狀PropertyTable內(nèi)部是RcRefCell...共享引用clone 只是增加引用計數(shù)previous指回原形狀transition_count加 1。插入屬性 x數(shù)據(jù)屬性與槽位索引繼續(xù)向?qū)ο筇砑訉傩詏.x 100; // 具體值不重要轉(zhuǎn)換鏈演變?yōu)楝F(xiàn)在對象o擁有了S2形狀同樣繼承了PropertyTable但屬性計數(shù)變?yōu)?并且 PropertyTable 中新增了一條記錄x: Slot 0, writable, configurable, enumerable。這里有三個關(guān)鍵信息屬性描述符新插入的普通數(shù)據(jù)屬性默認具有writable可寫、configurable可配置、enumerable可枚舉三個標(biāo)志Slot 0這是屬性在對象自身密集存儲dense storage中的索引位置PropertyTable 記錄鍵x被映射到槽位 0并攜帶屬性標(biāo)志。在源碼中這些屬性標(biāo)志就是 slot.rs 中定義的位標(biāo)志bitflagspub(crate) struct SlotAttributes: u8 { const WRITABLE 0b0000_0001; const ENUMERABLE 0b0000_0010; const CONFIGURABLE 0b0000_0100; const GET 0b0000_1000; const SET 0b0001_0000; // ... inline cache 相關(guān)位 }而Slot結(jié)構(gòu)把索引和屬性合在一起pub(crate) struct Slot { pub(crate) index: SlotIndex, // u32指向?qū)ο蟠鎯?pub(crate) attributes: SlotAttributes, }插入屬性時PropertyTableInner::insert見 property_table.rs會基于上一個屬性的槽位計算新屬性的索引這正是因為訪問器屬性與數(shù)據(jù)屬性占用的存儲寬度不同詳見后文pub(crate) fn insert(mut self, key: PropertyKey, attributes: SlotAttributes) { let slot Slot::from_previous(self.keys.last().map(|x| x.1), attributes); let index self.keys.len() as u32; self.keys.push((key.clone(), slot)); let value self.map.insert(key, (index, slot)); debug_assert!(value.is_none()); }結(jié)合對象o本身來看完整結(jié)構(gòu)如下對象o的存儲storage第 0 個元素就是值100與 Shape 中x: Slot 0的記錄一一對應(yīng)。屬性值存在對象自己的存儲數(shù)組里而屬性名、描述符、槽位索引存在共享的 Shape/PropertyTable 里——這就是隱藏類隱藏屬性的方式對象只保存值結(jié)構(gòu)信息全部上提共享。插入訪問器屬性 ygetter/setter 占用兩個槽位接下來用Object.defineProperty給o添加一個 getter/setter 屬性y// getter/setter 的具體實現(xiàn)并不重要 Object.defineProperty(o, y, { enumerable: true, configurable: true, get: function () { return this.x; }, set: function (value) { this.x value; }, });轉(zhuǎn)換鏈繼續(xù)延伸這次的轉(zhuǎn)換鏈變成了S0 → S1 → S2 → S3其中S3是插入y的形狀。PropertyTable 中新增記錄y: Slot 1, has_get, has_set, configurable, enumerable——它帶有has_get和has_set標(biāo)志。對應(yīng)的源碼是 slot.rs 中的寬度計算邏輯/// Get the width of the slot. pub(crate) fn width(self) - u32 { // accessor take 2 positions in the storage to accommodate for the get and set fields. 1 u32::from(self.is_accessor_descriptor()) }槽位的寬度是可變的數(shù)據(jù)屬性占 1 個存儲位置訪問器屬性占 2 個存儲位置分別存放get函數(shù)和set函數(shù)。這正是文檔強調(diào)的Slots are varying in length, two for accessor properties and one for data properties, the index points to the first value in the object storage.可以看到對象o的存儲中新增了兩個元素Element 1是 get 函數(shù)、Element 2是 set 函數(shù)而y的 Slot 索引1指向的是第一個值get 函數(shù)的位置。相鄰槽位索引的遞推邏輯在Slot::from_previous中實現(xiàn)pub(crate) fn from_previous(previous_slot: OptionSelf, new_attributes: SlotAttributes) - Self { let Some(previous_slot) previous_slot else { return Self { index: 0, attributes: new_attributes }; }; Self { index: previous_slot.index previous_slot.width(), // 上一個槽位索引 上一個槽位寬度 attributes: new_attributes, } }屬性查找用屬性計數(shù)做邊界判定文檔提出了一個很關(guān)鍵的問題如果一個對象只有S2形狀我們試圖訪問屬性yShape 如何知道它到底有沒有y這個屬性答案就藏在形狀上的屬性計數(shù)property count里。S2的屬性計數(shù)是1。PropertyTable 中所有屬性都存儲在一個保留插入順序且可索引的映射中源碼上是Vec(PropertyKey, Slot)保序 FxHashMapPropertyKey, (u32, Slot)加速查找的雙結(jié)構(gòu)見 property_table.rs。查找時如果某屬性在 PropertyTable 中的索引大于等于當(dāng)前形狀的屬性計數(shù)就說明該屬性不屬于這個形狀pub(crate) fn lookup(self, key: PropertyKey) - OptionSlot { let property_count self.property_count(); if property_count 0 { return None; } let property_table_inner self.property_table().inner().borrow(); // 檢查我們是否在訪問屬于另一個形狀的屬性 if let Some((property_table_index, slot)) property_table_inner.map.get(key) *property_table_index self.property_count() { return Some(*slot); } None }對應(yīng)到文檔的描述When we do a lookup on the property table, if the index of the property is greater than the property count (1), then it does not belong to the shape.這就是為什么y索引 1在S2屬性計數(shù) 1上查找會失敗、而在S3屬性計數(shù) 2上能查到的原因——屬性計數(shù)同時充當(dāng)了形狀擁有邊界。形狀復(fù)用新對象共享同一個 Shape現(xiàn)在再創(chuàng)建一個帶屬性x的新對象let o2 { x: 200 };由于o2的構(gòu)造過程與o添加x時完全一致同樣的原型、同樣的插入屬性x、同樣的屬性描述符o2會直接復(fù)用已有的S2形狀而不會創(chuàng)建新的形狀。為什么形狀知道可以復(fù)用S1再轉(zhuǎn)到S2文檔明確指出圖中省略了真實的指針結(jié)構(gòu)——每個形狀都持有指向已經(jīng)發(fā)生過的前向轉(zhuǎn)換的指針這些指針是弱引用weak pointers因此不會阻止未使用的形狀被垃圾回收。為了讓圖示更清晰避免太多箭頭這些前向轉(zhuǎn)換指針在圖中被省略了。源碼中對應(yīng)的是 shared_shape/mod.rs 的insert_property_transitionpub(crate) fn insert_property_transition(self, key: TransitionKey) - Self { // 檢查我們是否已經(jīng)創(chuàng)建過同樣的轉(zhuǎn)換如果是就直接復(fù)用 if let Some(shape) self.forward_transitions().get_property(key) { if let Some(inner) shape.upgrade() { return Self { inner }; } self.forward_transitions().prune_property_transitions(); } ... }前向轉(zhuǎn)換表的具體實現(xiàn)在 forward_transition.rs它以FxHashMapTransitionKey, WeakGcSharedShapeInner保存鍵屬性名屬性描述符→ 轉(zhuǎn)換后的形狀的弱引用映射。TransitionKey在 shared_shape/mod.rs 中定義pub(crate) struct TransitionKey { pub(crate) property_key: PropertyKey, pub(crate) attributes: SlotAttributes, }也就是說轉(zhuǎn)換的指紋是屬性鍵 屬性描述符的組合——只有兩者都完全一致時才能復(fù)用轉(zhuǎn)換結(jié)果。這正是{x: 100}和{x: 200}能共享S2的原因值不同不影響形狀而{x: 1}與{x: 1, y: 2}無法共享屬性集合不同。前向轉(zhuǎn)換的弱引用與定期清理ForwardTransition內(nèi)部使用WeakGc保存轉(zhuǎn)換目標(biāo)未使用的形狀可被 GC 回收。同時它維護一個insertion_count_since_prune計數(shù)器每插入 256 次就清理一次已被 GC 回收的弱引用u8::MAX溢出歸零觸發(fā)見 forward_transition.rspub(super) fn insert_property(self, key: TransitionKey, value: GcSharedShapeInner) { let mut this self.inner.borrow_mut(); let properties this.properties.get_or_insert_with(Box::default); if properties.get_and_increment_count() u8::MAX { properties.map.retain(|_, v| v.is_upgradable()); } properties.map.insert(key, WeakGc::new(value)); }在 shared_shape/tests.rs 中test_prune_property_on_counter_limit用 255 次連續(xù)插入驗證了這個清理機制插入第 256 次后被 GC 回收的過渡目標(biāo)會被清理映射規(guī)模從 255 驟降到 1計數(shù)器復(fù)位。屬性表分叉不同插入順序產(chǎn)生新分支現(xiàn)在給o2定義一個屬性z而不是yo2.z 300;轉(zhuǎn)換樹發(fā)生如下變化現(xiàn)在o2獲得了S4形狀。注意圖中PropertyTable 發(fā)生了分叉forko2從S2只有x出發(fā)插入z在位置1放入的是數(shù)據(jù)屬性z而S2原有的 PropertyTable 里位置1已經(jīng)被訪問器屬性y占據(jù)。兩個形狀的屬性描述符集合不再兼容因此不能再共享同一個 PropertyTable必須深拷貝一份——這就是分叉。源碼中對應(yīng)的是PropertyTable::add_property_deep_clone_if_needed見 property_table.rspub(crate) fn add_property_deep_clone_if_needed( self, key: PropertyKey, attributes: SlotAttributes, property_count: u32, ) - Self { { let mut inner self.inner.borrow_mut(); // 屬性表容量剛好匹配且不含該鍵直接原地插入共享 if (property_count as usize) inner.keys.len() !inner.map.contains_key(key) { inner.insert(key, attributes); return self.clone(); } } // 屬性已存在或?qū)傩圆灰恢滦枰羁截悓傩员?let this self.deep_clone(property_count); { let mut inner this.inner.borrow_mut(); inner.insert(key, attributes); } this }兩個分支從S2開始分道揚鑣S2 → S3插入y共享原表S2 → S4插入z深拷貝出新表。這也是隱藏類優(yōu)化中典型的形狀樹分叉現(xiàn)象——屬性插入順序不同、屬性描述符不同的對象會各自長出獨立的分支同構(gòu)的對象越多、分支越少復(fù)用率越高。從S4的構(gòu)造也可以看到transition_count的語義S4的transition_count是 3S0→S1→S2→S4共 3 次轉(zhuǎn)換但它的property_count是 2。刪除屬性回滾到基準(zhǔn)點并重建轉(zhuǎn)換鏈最后考慮從對象o刪除屬性xdelete o.x;注意圖中省略了o2及其形狀因為刪除o的屬性不應(yīng)影響o2的形狀樹。刪除的算法步驟文檔原述在鏈上找到當(dāng)初插入該屬性的節(jié)點取其**父節(jié)點base**作為重建的起點記住該屬性插入之后發(fā)生的所有轉(zhuǎn)換從 base 出發(fā)逐個重新應(yīng)用這些轉(zhuǎn)換跳過被刪除的屬性返回重建鏈的最后一個形狀作為對象的新形狀。源碼中對應(yīng)的是remove_property_transition與rollback_before見 shared_shape/mod.rspub(crate) fn remove_property_transition(self, key: PropertyKey) - Self { let (mut base, prototype, transitions) self.rollback_before(key); // 如果有原型轉(zhuǎn)換先應(yīng)用原型轉(zhuǎn)換 if let Some(prototype) prototype { base base.change_prototype_transition(prototype); } // 重新應(yīng)用此前的屬性轉(zhuǎn)換從最舊到最新 for (property_key, attributes) in transitions.into_iter().rev() { let transition TransitionKey { property_key, attributes }; base base.insert_property_transition(transition); } base }rollback_before從當(dāng)前形狀沿previous指針向上回溯跳過原型轉(zhuǎn)換、找到插入目標(biāo)屬性的節(jié)點返回其父形狀作為base同時收集沿途所有屬性轉(zhuǎn)換用IndexMap保序且同一屬性只保留最新屬性描述符以盡量構(gòu)造更小的樹?；厮葸^程的源碼注釋給出了一個直觀的例子// INSERT(x) INSERT(y) INSERT(z) // { } ------------ { x } ------------ { x, y } ------------ { x, y, z } // // 對 y 調(diào)用 rollback // // INSERT(x) INSERT(y) INSERT(z) // { } ------------ { x } ------------ { x, y } ------------ { x, y, z } // ^ // \--- base要重放的轉(zhuǎn)換數(shù)組INSERT(z)原型None由于o刪除x后剩下的y是訪問器屬性占據(jù)兩個存儲位置重建后y的槽位從Slot 1前移為Slot 0對象的存儲也隨之前移Element 0、Element 1都是函數(shù)。這也解釋了為什么刪除中間屬性時屬性表的深拷貝與槽位重排是必須的。值得注意刪除鏈尾屬性最后一個插入的屬性時只需回退到previous即可而刪除中間屬性時則需要走完整的回滾 重建路徑。刪除過程同樣會通過前向轉(zhuǎn)換表盡力復(fù)用已有的中間形狀避免無謂的新建。SharedShape 與 UniqueShape 的分工前文提到Shape內(nèi)部有兩種變體它們的取舍值得展開SharedShape共享形狀被多個對象共享是隱藏類優(yōu)化的主力。它通過不可變鏈 前向轉(zhuǎn)換表實現(xiàn)復(fù)用任何屬性變更插入、刪除、改描述符、改原型都產(chǎn)生新形狀并把舊形狀作為previous舊形狀保持不變從而不影響仍引用它的其他對象。UniqueShape唯一形狀只屬于單個對象的形狀典型場景是**內(nèi)建對象builtin objects**等天生唯一的對象。見 unique_shape.rs/// Represents a [Shape] that is not shared with any other object. /// /// This is useful for objects that are inherently unique like, /// the builtin object.UniqueShape允許原地修改屬性表直接可變但修改會導(dǎo)致當(dāng)前形狀失效、返回一個新形狀以使指向舊形狀的內(nèi)聯(lián)緩存inline caches失效——源碼中多處注釋都強調(diào)了這一點。還有一個關(guān)鍵的兜底機制共享形狀的轉(zhuǎn)換深度上限。在 mod.rs 中/// The max transition count of a [SharedShape] from the root node, /// before the shape will be converted into a [UniqueShape] const TRANSITION_COUNT_MAX: u16 1024;insert_property_transition、change_attributes_transition、remove_property_transition、change_prototype_transition四個轉(zhuǎn)換入口都會檢查一旦從根節(jié)點開始的轉(zhuǎn)換次數(shù)達到 1024就把 SharedShape 降級為 UniqueShapeto_unique()避免形狀鏈無限增長、前向轉(zhuǎn)換表無限膨脹。這個設(shè)計在Shape層面統(tǒng)一處理是隱藏類機制在極端動態(tài)對象面前的自我保護。Shapes 的落地對象屬性映射與 ObjectTemplateShapes 最終要服務(wù)于對象的實際屬性讀寫。在 Boa 中對象通過 property_map.rs 持有 Shape 與存儲storagePropertyTable中每個Slot的index直接對應(yīng)存儲數(shù)組的下標(biāo)。此外template.rs 提供了ObjectTemplate用于從預(yù)定義的 SharedShape 批量構(gòu)造同構(gòu)對象/// Represent a template of an objects properties and prototype. /// This is used to construct as many objects as needed from a predefined [SharedShape]. pub(crate) struct ObjectTemplate { shape: SharedShape, }它暴露了鏈?zhǔn)?APIproperty(key, attributes)添加數(shù)據(jù)屬性、accessor(key, get, set, attributes)添加訪問器屬性、set_prototype(prototype)設(shè)置原型最后create(data, storage)一次性產(chǎn)出對象。這相當(dāng)于把形狀轉(zhuǎn)換預(yù)編譯為模板運行時直接按模板批量創(chuàng)建對象并填充存儲是內(nèi)建對象初始化等高頻路徑的優(yōu)化手段。小結(jié)回顧整個 Shapes 機制可以提煉出幾條核心設(shè)計主線形狀與值分離對象存儲只保存屬性值屬性名、描述符、槽位索引全部上提至共享的 Shape 與 PropertyTable單向轉(zhuǎn)換鏈 前向轉(zhuǎn)換表屬性變更產(chǎn)生新形狀previous指針串成鏈前向轉(zhuǎn)換表以弱引用緩存已創(chuàng)建的轉(zhuǎn)換支持同構(gòu)對象復(fù)用形狀同時配合 256 次插入一次的清理機制控制內(nèi)存可變寬度槽位數(shù)據(jù)屬性占 1 個槽位、訪問器屬性占 2 個槽位Slot::from_previous保證相鄰屬性的索引計算正確屬性計數(shù)即邊界屬性查找用屬性計數(shù)判斷屬性是否屬于當(dāng)前形狀避免誤讀共享 PropertyTable 中屬于其他形狀的槽位分叉與深拷貝插入順序或?qū)傩悦枋龇患嫒輹r深拷貝 PropertyTable形成形狀樹分支刪除 回滾重建找到插入節(jié)點、取其父形狀為基準(zhǔn)、重放后續(xù)轉(zhuǎn)換最終得到新鏈尾形狀共享與唯一兩級設(shè)計SharedShape 面向多對象復(fù)用UniqueShape 面向內(nèi)建等唯一對象轉(zhuǎn)換深度超過 1024 時共享形狀自動降級為唯一形狀以自保。這套機制與 V8 等主流引擎的隱藏類思想一脈相承而 Boa 的 Rust 實現(xiàn)把弱引用前向轉(zhuǎn)換、深拷貝分叉、回滾重建等細節(jié)落到了類型系統(tǒng)與 GC 之上。想深入源碼的讀者可以從 shape/mod.rs 的Shape枚舉入手依次閱讀 shared_shape/mod.rs、property_table.rs、slot.rs、forward_transition.rs 與 unique_shape.rs配合 shared_shape/tests.rs 中的轉(zhuǎn)換清理測試即可完整掌握 Boa 對象系統(tǒng)的這一核心基石。贊分享編程語言編譯器開發(fā)工具【免費下載鏈接】boaBoa is an embeddable Javascript engine written in Rust.項目地址https://gitcode.com/gh_mirrors/bo/boa點擊查看免費下載相關(guān)推薦深入 V8 隱藏類Map與內(nèi)聯(lián)緩存IC動態(tài)語言高性能屬性訪問的引擎原理深入 V8 隱藏類Map與內(nèi)聯(lián)緩存IC動態(tài)語言高性能屬性訪問的引擎原理 JavaScript 是動態(tài)語言對象結(jié)構(gòu)可以隨時增刪改但 V8 依然能在語言運行時編譯器JIT編譯解釋器內(nèi)存管理終極指南深入解析WAMR引用類型的實現(xiàn)機制與高效應(yīng)用終極指南深入解析WAMR引用類型的實現(xiàn)機制與高效應(yīng)用 WebAssembly Micro Runtime WAMR 作為輕量級WebAssembly運行時其語言運行時嵌入式物聯(lián)網(wǎng)V8 堆中 JavaScript 對象與 Map隱藏類的表示原理詳解V8 堆中 JavaScript 對象與 Map隱藏類的表示原理詳解 導(dǎo)讀 本文基于 V8 倉庫 docs/heap/objects and maps.md語言運行時編譯器JIT編譯解釋器內(nèi)存管理上一篇深入理解Jocko Broker核心組件設(shè)計與實現(xiàn)原理詳解下一篇Fluent UI無障礙ARIA屬性參考常用ARIA屬性指南創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考