【SDU Chart Team - Core】DOM节点哈希

DOM节点哈希

在项目实现过程中，经常涉及到基于内容进行比较的情况。所谓基于内容比较，其实就是推导出的HTML一致。

原始方法

显然计算一遍HTML是十分耗时的：对于最自然的，自顶向底的过程，遍历子树的复杂度是 $O(n)$ 的，$n$为子树大小。当引入缓存机制后，计算自底向顶，需要遍历祖先，而且每个祖先需要重新使用儿子的缓存值，所以复杂度是 $O(mh)$ 的，$m$为子节点个数，$h$为高度。

然后进一步考虑比较的开销，对于生成字符串，其长度正比于子树大小，因此复杂度都是 $O(n)$ 的。

最后将节点内部属性纳入考虑的范畴，假设每个点有 $a$ 个属性，那么复杂度分别乘上了常数 $a$。

结论：更新的复杂度为 $O(an)$，比较的复杂度为 $O(an)$。

哈希树

有没有一个办法，使用某个 $O(1)$ 的量表达整棵树。显然，可以维护一颗哈希树，一个节点的哈希需要表示自身、所有子节点。所以定义如下式子计算一个节点的哈希：（加号表示字符串连接）

$$h_i=hash(hash(\sum _{k\in A_i}{v}_k)+hash(\sum _{(i,j)\in E}{h}_j))$$

为了进一步降低复杂度，将此式分为三个部分，分别更新：

$$\begin{gathered} h_{attribute}=hash(\sum _{k\in A_i}{v}_k) \\ has{h}_{inner}=h(\sum _{(i,j)\in E}{h}_j) \\ has{h}_i=h_{outer}=hash(h_{attribute}+h_{inner}) \end{gathered}$$

复杂度分析

第一个部分表示对所有节点内的属性进行哈希，需要遍历全部属性，复杂度为 $O(a)$；第二个部分表示对儿子的哈希和进行哈希，复杂度为 $O(m)$；第三个部分是相加，可近似认为是 $O(1)$。

注意到哈希的更新显然需要自底向上进行，这与缓存更新相同，因此遍历所有组件的复杂度是 $O(h)$。每个父亲只需要更新儿子的哈希和，所以复杂度也是 $O(m)$。最坏情况下 $O(mh)=O(n)$，此时整个树退化成链；但在随机情况满叉树中 $O(mh)=O(\log n)$。

结论：更新复杂度是 $O(amh)\approx O(a\log n)$，比较的复杂度是 $O(1)$。

尽管最坏情况下更新仍然需要遍历全部节点，但每个节点仅需提供一个哈希值，开销也是远小于字符串的。并且哈希的比较是个常数过程，对设计中出现的密集的比较过程，其优化效果十分明显。

应用

核心中多处使用了比较：

1. Remove中基于内容的移除
2. Dom Diff算法
3. 提交算法

在Dom Diff算法和提交算法中，哈希树是降低复杂度的核心设计之一。Dom Diff算法大量使用了三个部分的哈希，来贪心地得到出最小更新开销的解。

部分代码

• Outer Hash

  void SVGElement::update_outer_hash() {
      // has raw html
      if (_raw_HTML != STR_NULL) {
          _attribute_hash = _inner_hash = 0;
          _outer_hash = str_hash(_raw_HTML);
      }
      // update outer hash by attribute hash and inner hash
      else {
          std::stringstream ss;
          ss << get_tag() << ",";
          ss << _attribute_hash << ",";
          ss << _inner_hash;
          _outer_hash = str_hash(ss.str());
      }
  
      // update parent element
      if (auto sp = _parent_element.lock()) {
          sp->update_inner_hash();
      }
  }
  

• Attribute Hash

  void SVGElement::update_attribute_hash() {
      // update attribute hash
      if (_raw_HTML == STR_NULL) {
          _attribute_hash = str_hash(get_attributes());
      }
  
      // update outer hash
      update_outer_hash();
  }
  

• Inner Hash

  void SVGElement::update_inner_hash() {
      // inner string + (inner elements)
      if (_raw_HTML == STR_NULL) {
          std::stringstream ss;
          ss << get_raw_HTML() << ",";
          for (auto p : _inner_elements) ss << p->get_outer_hash() << ",";
          _inner_hash = str_hash(ss.str());
      }
  
      // update outer hash
      update_outer_hash();
  }