专栏名称: 阿里开发者

阿里巴巴官方技术号，关于阿里的技术创新均将呈现于此

你的object可能没别人的快/小

阿里开发者 · 公众号 · 科技公司 · 2024-11-06 08:30

主要观点总结

本文深入探讨了JavaScript对象在V8引擎中的内存管理和优化策略，特别是在处理大规模数据时可能出现的性能和内存问题。通过介绍V8中对象的基本结构、对象结构变化的影响以及如何避免或削弱负面影响，提供了一些有效的JS对象内存优化方法。

关键观点总结

关键观点1: JSON.parse加载大规模数据后内存飙升的原因

大规模数据下，JS对象的存储结构发生变化，由fast模式转为slow模式，导致内存飙升。

关键观点2: V8中对象的基本结构

V8中的对象最少会有三个指针，分别指向HiddenClass、Properties store和Elements store。对象内属性(in-object properties)存储在对象本身上，数量由对象的初始大小预先确定。

关键观点3: 如何避免或削弱对象结构变化带来的负面影响

尽量让对象处于快速模式，避免属性总数过多或删除属性。可以通过设置对象为函数原型、使用JSON.stringify和JSON.parse解析对象、非必要不使用Object.create(null)创建对象等方式进行优化。

关键观点4: JS对象内存优化的解决方案

介绍两种优化策略：一是迁移慢对象到fast模式下，二是使用JSON.stringify和JSON.parse解析对象。这两种方法都可以有效降低对象存储大小。

正文

阿里妹导读

本文深入探讨了JavaScript对象在V8引擎中的内存管理和优化策略，特别是在处理大规模数据时可能出现的性能和内存问题。

背景

开发某JS应用时使用了一个较大的数据列表，在探究性能和内存过程中，观察到了反常的数据内存变化，从而引发了本文相关内容的研究。本文绝大部分对象设计和实现细节的内容和结论来自于V8的源码阅读、以及Chrome上的JS实验，如有错误欢迎指出纠正。

引子

假设有100,000*100的数据存储在一个JSON文件中，表达形式是一个含10万个对象的数组，其中每个对象有相同的100个属性，属性名和属性值非常简单，比如{"a0":0, "a1":0,"a2":0...}。

JSON.parse加载此数据后，JS内存占用是42.6MB（所有Chrome内存汇报都已经过垃圾回收）。

此时，如果我们删除每一个元素中间的某个属性，如：

arr.forEach((item) => { delete item[`a0`]; }))

删除一个属性，大家以为内存有会变化吗？刚开始我以为数据量没变内存变化不会太大，然而JS堆内存飙升到324MB，内存却增加近 8 倍，为什么？

你可能会发觉在这些特定的场景下，JS对象的存储结构发生了变化，事实确实如此。Chrome的内核是V8引擎， V8是如何设计JS对象，对象什么情况下会发生存储结构变化，如何避免和削弱负面影响，这是本文探讨的几个问题。

相关测试代码如下：

// 创建一个空数组const data = [];
// 生成100个对象for (let i = 0; i < 100000; i++) {  // 创建一个空对象  const obj = {};
  // 生成100个属性  for (let j = 0; j < 100; j++) {    // 属性名和属性值都是数字    const propName = `a${j}`;    const propValue = 0;    obj[propName] = propValue;  }
  // 将对象添加到数组中  data.push(obj);}
// 将数据转换为JSON字符串const jsonString = JSON.stringify(data);
// 将JSON字符串写入文件const fs = require('fs');fs.writeFileSync('data.json', jsonString);"en">      "UTF-8" />    "viewport" content="width=device-width, initial-scale=1.0" />    Document        >点击    点击按钮执行 arr.forEach((item) => { delete item[`a0`]; })          var xhr = new XMLHttpRequest();      // 方便在Heap Snapshot观测      function createObject(data) {        this["json"] = data;      }      var obj = new createObject();      xhr.onreadystatechange = function () {        if (this.readyState == 4 && this.status == 200) {          var data = JSON.parse(this.responseText);          obj["json"] = data;        }      };      xhr.open("GET", "data.json", true);      xhr.send();
      const btn = document.getElementById("click");      btn.addEventListener("click", () => {        obj.json.forEach((item) => {          delete item[`a0`];        });      });


<html lang="en">  <head>    <meta charset="UTF-8" />    <meta name="viewport" content="width=device-width, initial-scale=1.0" />    <title>Documenttitle>  head>  <body>    <button id="click">点击button>    <div>点击按钮执行 arr.forEach((item) => { delete item[`a0`]; })div>    <script>      var xhr = new XMLHttpRequest();      // 方便在Heap Snapshot观测      function createObject(data) {        this["json"] = data;      }      var obj = new createObject();      xhr.onreadystatechange = function () {        if (this.readyState == 4 && this.status == 200) {          var data = JSON.parse(this.responseText);          obj["json"] = data;        }      };      xhr.open("GET", "data.json", true);      xhr.send();
      const btn = document.getElementById("click");      btn.addEventListener("click", () => {        obj.json.forEach((item) => {          delete item[`a0`];        });      });script>  body>html>

JSObject基本结构

JSObject最少会有三个指针，分别指向HiddenClass，Properties store和Elements store，V8中的Map在一些文章中也被叫做hidden class，本文出现的所有Map均指hidden class，简单来说Map用于描述对象的结构数据的。这里引用V8官方文档中的一张图。

V8 支持所谓的对象内属性(in-object properties)，这些属性直接存储在对象本身上。这些是 V8 中可用的最快属性，因为它们无需任何间接即可访问。

对象内属性的数量由对象的初始大小预先确定，如果添加的属性数多于对象中的空间，则它们将存储在Properties store中，Properties store增加了一个间接级别，但可以独立增长。

在对象中的数字属性({1 : "a", 2: "b"})称为排序属性，数字属性将存储在Elements store中，元素和属性存储在两个单独的数据结构中，这使得添加和访问属性或元素对于不同的使用模式更加高效。如图一个简单🌰：

V8倾向于具有相同结构的对象共享相同Map，有很多对象具备相似属性结构，只是属性的数值不同，共享这些结构数据是一个节约存储的好方法，V8通过构建transition tree来实现这一点。

每次添加新属性时，对象的 map 都会更改。V8 创建了一个将 map 链接在一起的transition tree。例如上图中将属性 “a” 添加到空对象时，V8 知道要采用哪个 map。此过渡树可确保以相同的顺序添加相同的属性时，最终会得到相同的最终 map。下面的示例显示，即使我们在两者之间添加简单的索引属性，我们也会遵循相同的转换树。

但是，如果我们创建一个添加了不同属性的新对象，在本例中为属性 “d”，V8 会为新的 map 创建一个单独的分支。

简单概述了 V8中对象的基本结构之后，下面让我们了解一下如何避免或消弱对象结构变化带来的负面影响👇👇👇。

如何避免或削弱对象结构变换带来的负面影响

先划重点：要拥有最高的性能，尽量让对象处于快速模式

看一段在jsPerf平台简单实验对比：

这段测试代码很简单，声明两个对象fasetObject和slowObject，然后循环100次访问各自a、c两个属性。Ops/sec 表示测试结果以每秒钟执行测试代码的次数显示，这个数值是越大越好，可以看到图中fastObject比slowObject对象测试出来的Ops/sec大了很多。

要解释这个现象，我们就要先了解 V8 对于 JavaScript 对象的两种访问模式：

Fast Mode： 将存储在线性属性存储中的属性定义为 “fast”。快速属性只需通过属性存储中的索引即可访问。要从属性名称到属性存储中的实际位置，必须查阅 map 上的描述符数组。

Dictionary Mode： 字典模式也称为哈希表模式，V8 使用哈希表来存储对象的属性。

在这里给出上文中引子实验案例内存飙升的答案，内存飙升的原因就是Array中的10万个对象全部发生了fast到slow的模式转换，对象存储结构发生了变化。通过上面一段benchmark可以看出，fast与slow模式访问属性速度也有一定差距。

从fast模式到slow模式的转换，一般两种情况一是属性总数太多，二是删除属性(主要由删除非最后添加属性造成)，有时候难以避免遇到慢对象，下面举几个慢对象转换为快对象的方法。

当对象被设置成为一个函数（或对象）的原型时会从Dictionary Mode优化成为Fast Mode


/ node --allow-natives-syntax xxx.jsfunction toFastProperties(o) {  function A() {   this.x = 'x'  }  A.prototype = o;  const a = new A();  function ic() {    return typeof a.b;  }  ic();  ic();  return o;}
const o = {a:1,b:2};
console.log(%HasFastProperties(o)); // truedelete o.a;console.log(%HasFastProperties(o)); // false toFastProperties(o);console.log(%HasFastProperties(o)); // true

在设置对象为函数原型后，又进行了实例化和两次属性查询，感兴趣的可以看下V8系列中的