将VDOM存储在地图中?

时间:2017-11-11 16:11:04

标签: javascript algorithm dictionary dom

有关VDOM及其在地图中的存储的一些内容,仅限于...

考虑VDOM制作,如下所示:

h('div', { class: "list" }, [
  h('div', { class: "list-item" }, [
    h('span', {}, item.name),
    h('button', { value: 'Add To Cart', onclick: addToCart(item.id), []})
  ]),
  // ... lots of items
])

我的问题是将生成的N元树存储在Map中,使用相同的块,如:

class Block { 
  constructor (uuid, parentUUID, leftSiblingUUID) {
    this.uuid = uuid
    this.parent = parentUUID
    this.leftSibling = leftSiblingUUID
    this.firstAttrUUID = // some UUID
    this.data = {}
  }
}

块的结构是相同的,无论你是否存储了" div"或其中一个属性。整个DOM树存储在Map中。密钥是32位(4字节)无符号整数,如:0xbada55e5,针对unicity进行测试。

推论:

  • 有点压倒性的内存使用:4个字节*每个块的指针数,但是:
  • 对块的访问是时间常数(由于Map)
  • 没有直接对象循环参考,
  • 扁平数据结构,允许简单的序列化和反序列化机制,
  • 可以使用diff / patch算法进行一些缓和

你的意见是什么?非常感谢!

0 个答案:

没有答案