HTML控件自定义数据存储不同类型数据的性能与内存消耗咨询

咱们一步步来拆解你的问题，尽量用直白的方式讲清楚：

答案是几乎没有额外开销。因为在JavaScript里，对象是按引用传递和存储的——你把对象放到自定义数据属性里时，并不是把整个对象的内容复制过去，只是存了一个指向原对象的“指针”。这个操作的内存占用微乎其微，执行速度也和存储普通字符串、数字差不多。

唯一需要注意的逻辑点是：如果后续原对象被其他代码修改，自定义数据里的引用会同步反映出这些变化，但这属于业务逻辑层面的问题，和性能开销无关。

下面逐个分析你提到的场景：

• 场景1：在customdata中添加字符串或数字
  这是开销最小的情况。字符串、数字属于JavaScript原始值，存储到自定义数据时会直接保存它们的副本（但原始值本身占用的内存非常小）。不管是写入还是读取，速度都极快，内存消耗可以完全忽略，浏览器对这类值的处理已经做了极致优化。

• 场景2：添加已创建对象（此前代码中生成的map/object、AngularJS model对象等）
  和第一个问题的逻辑一致，这里存储的只是对象的引用，不会复制整个对象的内容，所以内存开销几乎为零。性能上和存储原始值几乎没有差别，读写操作都是直接操作引用，效率极高。

  小提醒：如果原对象原本可以被垃圾回收（没有其他引用了），但因为自定义数据里的引用存在，它会一直留在内存中——这属于内存泄漏风险，不是存储操作本身的开销，需要你在业务逻辑里注意清理。

• 场景3：添加（字符串，已创建对象）的映射（object）
  开销取决于你存储的映射对象本身的大小，但核心还是引用存储逻辑：

  • 如果是把已存在的映射对象存进去，那开销和单个对象引用差不多，只是存一个指针；
  • 如果是临时创建新的映射对象再存储，额外开销就是这个新对象本身的内存（但一般小映射的内存占用极低，几乎不会有影响）。

  读取时需要先拿到映射对象，再访问对应的键值对，比直接读取单个值多了一步，但这步操作的性能损耗在绝大多数业务场景下都完全感知不到。

内容的提问来源于stack exchange，提问作者Sumi Sharma