共计 7138 个字符，预计需要花费 18 分钟才能阅读完成。
JavaScript 语言的角度来看，JavaScript 对象像一个字典，字符串作为键名，任意对象能够作为键值，能够通过键名读写键值。
然而在 V8 实现对象存储时，并没有齐全采纳字典的存储形式，这次要是出于性能的考量。因为字典是非线性的数据结构，查问效率会低于线性的数据结构，V8 为了晋升存储和查找效率，采纳了一套 简单的存储策略。
明天咱们理解一下 v8 为了晋升对象的拜访性能都采纳了那些策略
首先咱们来剖析一下下边的这段代码
function Foo() {this[100] = 'test-100'
this[1] = 'test-1'
this["B"] = 'bar-B'
this[50] = 'test-50'
this[9] = 'test-9'
this[8] = 'test-8'
this[3] = 'test-3'
this[5] = 'test-5'
this["A"] = 'bar-A'
this["C"] = 'bar-C'
}
var bar = new Foo()
for(key in bar){console.log(`index:${key} value:${bar[key]}`)
}
在下面这段代码中，咱们利用构造函数 Foo 创立了一个 bar 对象，在构造函数中，咱们给 bar 对象设置了很多属性，包含了数字属性和字符串属性，而后咱们枚举进去了 bar 对象中所有的属性，并将其一一打印进去，上面就是执行这段代码所打印进去的后果：
index:1 value:test-1
index:3 value:test-3
index:5 value:test-5
index:8 value:test-8
index:9 value:test-9
index:50 value:test-50
index:100 value:test-100
index:B value:bar-B
index:A value:bar-A
index:C value:bar-C
察看这段打印进去的数据，咱们发现打印进去的属性程序并不是咱们设置的程序，咱们设置属性的时候是乱序设置的，比方开始先设置 100，而后又设置了 1，然而输入的内容却十分法则，总的来说体现在以下两点：
设置的数字属性被最先打印进去了，并且是依照数字大小的程序打印的；
设置的字符串属性仍然是依照之前的设置程序打印的，比方咱们是依照 B、A、C 的程序设置的，打印进去仍然是这个程序
之所以呈现这样的后果，是因为在 ECMAScript 标准中定义了
数字属性应该依照索引值大小升序排列
字符串属性依据创立时的程序升序排列
排序属性 & 惯例属性 & 内属性
在这里咱们把对象中的数字属性称为 排序属性，在 V8 中被称为 elements
段落援用字符串属性就被称为 惯例属性，在 V8 中被称为 properties。
在 V8 外部，为了无效地晋升存储和拜访这两种属性的性能，别离应用了两个线性数据结构来别离保留
数字属性存储在排序属性（elements）中
字符串属性寄存在惯例属性（properties）中
咱们能够通过 chrome 浏览器的 Memory 来看一下之前的案例的存储状态
咱们能够看到在内存快照中咱们只看到了 排序属性（elements）
却没有 惯例属性（properties）
这是因为将不同的属性别离保留到 elements 和 properties 中，无疑简化了程序的复杂度。
然而在查找元素时，却多了一步操作
比方执行 bar.B 这个语句来查找 B 的属性值，须要先查找出 properties 属性所指向的对象 properties，而后再在 properties 对象中查找 B 属性，这种形式在查找过程中减少了一步操作，因而会影响到元素的查找效率。
所以 V8 采取了一个衡量的策略以放慢查找属性的效率，
将局部惯例属性间接存储到对象自身，咱们把这称为对象内属性 (in-object properties)
接下来咱们在通过 chrome 的内存快照来进一步理解一下，对象的在内存中的散布
咱们在控制台输出下边的代码
function Foo(property_num,element_num) {
// 增加可索引属性
for (let i = 0; i < element_num; i++) {this[i] = `element${i}`
}
// 增加惯例属性
for (let i = 0; i < property_num; i++) {let ppt = `property${i}`
this[ppt] = ppt
}
}
var bar = new Foo(10,10)将 Chrome 开发者工具切换到 Memory 标签，而后点击左侧的小圆圈捕捉以后的内存快照
在搜寻框外面输出构造函数 Foo，Chrome 会列出所有通过构造函数 Foo 创立的对象
咱们在内存快照中察看一下此时的布局
10 个惯例属性作为对象内属性，寄存在 bar 函数外部；
10 个排序属性寄存在 elements 中。
接下来咱们能够将创立的对象属性的个数调整到 20 个
var bar2 = new Foo(20,10)这时候属性的内存布局是这样的：
10 属性间接寄存在 bar2 的对象内 ;
10 个惯例属性以线性数据结构的形式寄存在 properties 属性外面 ;
10 个数字属性寄存在 elements 属性外面。
因为创立的罕用属性超过了 10 个，所以另外 10 个罕用属性就被保留到 properties 中了
留神因为 properties 中只有 10 个属性，所以仍然是线性的数据结构
那么如果罕用属性太多了，比方创立了 100 个，咱们再来看看其内存散布
var bar3 = new Foo(100,10)这时候属性的内存布局是这样的：
10 属性间接寄存在 bar3 的对象内 ;
90 个惯例属性以非线性字典的这种数据结构形式寄存在 properties 属性外面 ;
10 个数字属性寄存在 elements 属性外面。
这时候的 properties 属性外面的数据并不是线性存储的，而是以非线性的字典模式存储的
接下来再看一下删除一个属性后的布局
var bar4 = new Foo(5,5);
delete bar4.property0
咱们会发现这时候尽管只设置了 5 个个惯例属性，然而因为咱们执行了 delete 操作，properties 属性中的存储构造也会变成非线性的构造
因而咱们能够总结如果对象中的属性过多时
或者存在重复增加或者删除属性的操作，V8 就会将线性的存储模式降级为非线性的字典存储模式，这样尽管升高了查找速度，然而却晋升了批改对象的属性的速度
暗藏类
方才咱们讲了是 V8 对于对象的存储形式上做了那些晋升
接下来咱们再来说一下查找对象属性的时候，v8 又采取了什么策略来晋升查问效率呢
咱们晓得 JavaScript 是一门动静语言，其执行效率要低于动态语言，
V8 为了晋升 JavaScript 的执行速度，借鉴了很多动态语言的个性，比方实现了 JIT 机制，为了晋升对象的属性访问速度而引入了暗藏类，为了减速运算而引入了内联缓存。
咱们来重点剖析下 V8 中的暗藏类，看看它是怎么晋升拜访对象属性值速度的。
暗藏类 - 动态语言特色
在开始钻研暗藏类之前咱们就先来剖析下为什么动态语言比动静语言的执行效率更高
动态语言在申明一个对象之前须要定义该对象的构造，也称为形态，编译时每个对象的形态都是固定的，无奈被扭转的。那么拜访一个对象的属性时，天然就晓得该属性绝对于该对象地址的偏移值了，比方在应用 start.x 的时候，编译器会间接将 x 绝对于 start 的地址写进汇编指令中，那么当应用了对象 start 中的 x 属性时，CPU 就能够间接去内存地址中取出该内容即可，没有任何两头的查找环节。
JavaScript 在运行时，对象的属性是能够被批改的，所以当 V8 应用了一个对象时，比方应用了 start.x 的时候，它并不知道该对象中是否有 x，也不晓得 x 绝对于对象的偏移量是多少，也能够说 V8 并不知道该对象的具体的形态。
那么，当在 JavaScript 中要查问对象 start 中的 x 属性时，V8 会先查找 properties，再在 properties 中中查找 x 属性，这个过程十分的慢且耗时
什么是暗藏类 (Hidden Class）？
依据动态语言的特色，v8 采纳的一个思路就是将 JavaScript 中的对象动态化，也就是 V8 在运行 JavaScript 的过程中，会假如 JavaScript 中的对象是动态的，具体地讲，V8 对每个对象做如下两点假如
对象创立好了之后就不会增加新的属性；
对象创立好了之后也不会删除属性。
V8 会为每个对象创立一个暗藏类，对象的暗藏类中记录了该对象一些根底的布局信息，包含以下两点
对象中所蕴含的所有的属性；
每个属性绝对于对象的偏移量。
这样 V8 拜访某个对象中的某个属性时，就会先去暗藏类中查找该属性绝对于它的对象的偏移量，而后间接去内存中取出对于的属性值，而不须要经验一系列的查找过程，那么这就大大晋升了 V8 查找对象的效率。
联合一段代码来剖析下暗藏类是怎么工作的：
let point = {x:100,y:200}
V8 执行到这段代码时，会先为 point 对象创立一个暗藏类(又称为 map)，每个对象都有一个 map 属性，其值指向内存中的暗藏类。
暗藏类形容了对象的属性布局，它次要包含了属性名称和每个属性所对应的偏移量;
比方 point 对象的暗藏类就包含了 x 和 y 属性，x 的偏移量是 4，y 的偏移量是 8
上图右边的是 point 对象在内存中的布局，point 对象的第一个属性就指向了它的 map；
有了 map 之后，当你再次应用 point.x 拜访 x 属性时，
V8 会查问 point 的 map 中 x 属性绝对 point 对象的偏移量
而后将 point 对象的起始地位加上偏移量，就失去了 x 属性的值在内存中的地位，有了这个地位也就拿到了 x 的值，这样咱们就省去了一个比较复杂的查找过程。
多个对象共用一个暗藏类
咱们在控制台输出上面的代码，而后查看内存快照
function Foo1 () {}
var a = new Foo1()
var b = new Foo1()
a.name = 'aaa'
a.text = 'aaa'
b.name = 'bbb'
b.text = 'bbb'
a[1] = 'aaa'
a[2] = 'aaa'
a、b 都有命名属性 name 和 text，此外 a 还额定多了两个可索引属性。从快照中能够显著的看到，可索引属性是寄存在 elements 中的，此外，a 和 b 具备雷同的构造（map 后边我标红的地位）
每个对象都有一个 map 属性，该属性值指向该对象的暗藏类。不过如果两个对象的 形态是雷同的 ，V8 就会为其 复用 同一个暗藏类，这样有两个益处：
缩小暗藏类的创立次数，也间接减速了代码的执行速度；
缩小了暗藏类的存储空间。
什么状况下两个对象的形态是雷同的，要满足以下两点：
雷同的属性名称；
相等的属性个数。
那么对于前边的案例你可能会有点好奇，前边的两个对象的属性不一样（b 比 a 多了两个数字属性），怎么会有雷同的构造呢？要了解这个问题，首先能够思考下边三个问题。
为什么要把对象存起来？当然是为了之后要用。
要用的时候须要做什么？找到这个属性。
形容构造是为了做什么呢？按图索骥，不便查找
那么，对于可索引属性来说，它自身曾经是有序地进行排列了，咱们为什么还要屡次一举通过它的构造去查找呢。既然不必通过它的构造查找，那么咱们也不须要再去形容它的构造了。这样，应该就不难理解为什么 a 和 b 具备雷同的构造了，因为它们的构造中只形容了它们都具备 name 和 text 这样的状况。
从新构建暗藏类
在结尾咱们提到了，V8 为了实现暗藏类，须要两个假如条件：
对象创立好了之后就不会增加新的属性；
对象创立好了之后也不会删除属性。
然而，JavaScript 仍然是动静语言，在执行过程中，对象的形态是能够被扭转的，如果某个对象的形态扭转了，暗藏类也会随着扭转，这意味着 V8 要为新扭转的对象从新构建新的暗藏类，这对于 V8 的执行效率来说，是一笔大的开销。
艰深地了解，给一个对象增加新属性，删除属性，或者扭转性的类型都会扭转这个对象的形态，那么势必也就会触发 V8 为扭转形态后的对象重建新的暗藏类。
比方之前的案例，咱们能够试一下执行（delete a.name）
这样咱们会发现 a 和 b 的 map 就不雷同了，并且会将字符串属性以非线性的字典的构造存储在 properties 中，也就是由内属性变为了慢属性
最佳实际
联合上边说如果心愿查找效率更高，咱们心愿对象中的暗藏类不要轻易被扭转，因为这样会触发 V8 重构该对象的暗藏类，间接影响到了程序的执行性能。
那么在理论工作中，咱们应该尽量留神以下几点：
一，初始化对象时，要保障属性的程序是统一的。
比方不要先通过字面量 x、y 的程序创立了一个 point 对象，而后通过字面量 y、x 的程序创立一个对象 point2二，尽量一次性初始化残缺对象属性。
因为每次为对象增加一个属性时，V8 都会为该对象从新设置暗藏类。三，尽量避免应用 delete 办法。
delete 办法会毁坏对象的形态，同样会导致 V8 为该对象从新生成新的暗藏类。
内联缓存
咱们来剖析一下下边的代码
function loadX(o) {return o.x}
var o = {x: 1,y:3}
var o1 = {x: 3 ,y:6}
for (var i = 0; i < 90000; i++) {loadX(o)
loadX(o1)
}咱们定义了一个 loadX 函数，它有一个参数 o，该函数只是返回了 o.x。
通常 V8 获取 o.x 的流程是这样的：查找对象 o 的暗藏类，再通过暗藏类查找 x 属性偏移量，而后依据偏移量获取属性值。
在这段代码中 loadX 函数会被通过 for 循环反复执行，那么获取 o.x 流程也须要重复被执行。
有没有方法再度简化这个查找过程，最好能一步到位查找到 x 的属性值呢？
答案是：有
V8 会想尽一切办法来压缩这个查找过程，以晋升对象的查找效率。
这个减速函数执行的策略就是内联缓存 (Inline Cache)，简称为 IC。接下来咱们来看一下，V8 是怎么通过 IC，来减速函数 loadX 的执行效率的。
什么是内联缓存？
V8 执行函数的过程中，会察看函数中一些调用点 (CallSite) 上的要害的两头数据，而后将这些数据缓存起来，当下次再次执行该函数的时候，V8 就能够间接利用这些两头数据，节俭了再次获取这些数据的过程，因而 V8 利用 IC，能够无效晋升一些反复代码的执行效率。
IC 会为每个函数保护一个反馈向量 (FeedBack Vector)，反馈向量记录了函数在执行过程中的一些要害的两头数据。
比方上面这段函数：
function loadX(o) {
o.y = 4
return o.x
}
当 V8 执行这段函数的时候，它会判断 o.y = 4 和 return o.x 这两段是调用点 (CallSite)，因为它们应用了对象和属性，那么 V8 会在 loadX 函数的反馈向量中为每个调用点调配一个插槽。每个插槽中包含了插槽的索引 (slot index)、插槽的类型 (type)、插槽的状态 (state)、暗藏类 (map) 的地址、还有属性的偏移量，
比方下面这个函数中的两个调用点都应用了对象 o，那么反馈向量两个插槽中的 map 属性也都是指向同一个暗藏类的，因而这两个插槽的 map 地址是一样的。
当 V8 再次调用 loadX 函数时，比方执行到 loadX 函数中的 return o.x 语句时，它就会在对应的插槽中查找 x 属性的偏移量，之后 V8 就能间接去内存中获取 o.x 的属性值了。这样就大大晋升了 V8 的执行效率。
多态和超态
通过缓存执行过程中的根底信息，就可能晋升下次执行函数时的效率。
然而这有一个前提，那就是屡次执行时，对象的形态是固定的，如果对象的形态不是固定的，那 V8 会怎么解决呢？
咱们调整一下下面这段 loadX 函数的代码，调整后的代码如下所示：
function loadX(o) {return o.x}
var o = {x: 1,y:3}
var o1 = {x: 3, y:6,z:4}
for (var i = 0; i < 90000; i++) {loadX(o)
loadX(o1)
}咱们能够看到，对象 o 和 o1 的形态是不同的，这意味着 V8 为它们创立的暗藏类也是不同的。
面对这种状况，V8 会抉择将新的暗藏类也记录在反馈向量中，同时记录属性值的偏移量，这时，反馈向量中的第一个槽里就蕴含了两个暗藏类和偏移量
当 V8 再次执行 loadX 时，同样会查找反馈向量表，此时插槽中记录了两个暗藏类。这时，V8 须要额定做一件事，拿这个新的暗藏类和第一个插槽中的两个暗藏类来一一比拟，如果找到雷同的，那么就应用该暗藏类的偏移量。如果没有雷同的呢？同样将新的信息增加到反馈向量的第一个插槽中。
所以一个反馈向量的一个插槽中能够蕴含多个暗藏类的信息：
插槽中只蕴含 1 个暗藏类，咱们称这种状态为单态 (monomorphic)；
插槽中蕴含了 2～4 个暗藏类，称这种状态为多态 (polymorphic)；
插槽中超过 4 个暗藏类，称这种状态为超态 (magamorphic)。
因为多态存在比拟的环节，所以多态或者超态的状况，其执行效率必定要低于单态的。
单态的性能优于多态和超态，所以咱们须要略微防止多态和超态的状况。
最初我还想强调一点，尽管咱们剖析的暗藏类和 IC 能晋升代码的执行速度
然而在理论的我的项目中，影响执行性能的因素十分多，
找出那些影响性能瓶颈才是至关重要的，
你不须要适度关注微优化，你也不须要适度担心你的代码是否毁坏了暗藏类或者 IC 的机制，
因为绝对于其余的性能瓶颈，它们对效率的影响可能是微不足道的。
思考题 ### 三级题目
察看上面两段代码：
let data = [1, 2, 3, 4]
data.forEach((item) => console.log(item.toString())
let data = ['1', 2, '3', 4]
data.forEach((item) => console.log(item.toString())
你认为这两段代码，哪段的执行效率高，为什么？欢送你在留言区与我分享探讨。
