树形结构的拆分及应用

发表于 更新于 本文字数： 460 阅读时长 ≈ 1 分钟

背景

在之前的介绍小程序性能优化的文章中曾提到一种使用 rich-text 来替代 web-view 展示 Web 页面的方法，由于实际操作中，源 DOM 树可能会非常复杂，导致生成的 node 树很庞大，不易拆分，直接执行 setData 会造成页面卡死，所以需要有能够分段拆分树型结构的方案。这种方案应该满足我们的两点需求：

  1. 能够被分批读取生成 node 树
  2. 每段大小可以控制

简单设计

由需求 1，拆分的结果需要可以被分批读取，我们可以做如下设计：

interface Node {
  children?: Node[];
}

interface Fragment {
  path: number[];
  nodes: Node[];
}

const splitTree = (tree: Node): Fragment[] => {};

const renderFragments = (frags: Fragment[]): void => {};

树的拆分

To be continued…