How to Build a High‑Performance Virtual Tree in Santd for 10k+ Nodes

When a tree component needs to render tens of thousands of nodes, the rendering time can become unacceptable; a 11,110‑node tree took about 26 seconds on a 2019 MacBook Pro Chrome instance. The solution is a virtual tree , which only renders the nodes that are visible in the viewport.

What is a Virtual Tree?

A virtual tree works like a virtual list: it renders only the data within the visible area, skipping the rest. In other words, it is a tree that renders only the data in the visible region .

Why Use a Virtual Tree?

Rendering a massive tree is time‑consuming because every node must be processed and painted. By limiting rendering to the visible subset, the UI can be updated dramatically faster.

Implementation Steps

1. Flatten the Tree Data

The original hierarchical data is converted into a flat array using a depth‑first traversal:

function flattenTreeData(treeData) {
  const flatNodes = [];
  const dig = treeData => {
    treeData.forEach(treeNode => {
      flatNodes.push(treeNode);
      dig(treeNode.children || []);
    });
  };
  dig(treeData);
  return flatNodes;
}

After flattening, every node becomes a top‑level element in the array.

2. Calculate Visible Nodes

Assuming a fixed node height ( NODE_HEIGHT) and a fixed viewport height ( VISIBLE_HEIGHT), the number of nodes that can be displayed is:

const visibleCount = Math.ceil(VISIBLE_HEIGHT / NODE_HEIGHT);

The index of the first visible node is derived from the current scroll offset:

let start = Math.floor(scrollTop / NODE_HEIGHT);

Visible nodes are then sliced from the flat array:

let visibleNodes = flatNodes.slice(start, Math.min(start + visibleCount, flatNodes.length));

3. Simulate Scrolling

Because only a subset of nodes is rendered, a scroll container with a phantom element is used to provide the total scroll height, while the visible nodes are rendered in an absolutely positioned list:

<div class="virtual-tree" style="height:500px;overflow:scroll;position:relative" on-scroll="scrollEvent">
  <div class="tree-phantom" style="height:{{totalHeight}}px"></div>
  <ul class="visible-tree-nodes" style="position:absolute;top:{{top}}px">
    <s-tree-node s-for="node in visibleNodes" nodeData="{{node}}"></s-tree-node>
  </ul>
</div>

The scroll handler updates both the start index and the vertical offset of the rendered list:

scrollEvent() {
  const scrollTop = document.querySelector('virtual-tree').scrollTop;
  this.data.set('start', Math.floor(scrollTop / NODE_HEIGHT));
  this.data.set('top', scrollTop - (scrollTop % NODE_HEIGHT));
}

4. Decorate the List as a Tree

The visible nodes are displayed as a plain list; CSS is then applied to add indentation and tree‑like visuals, turning the list back into a tree appearance.

Final Result

With the virtual tree applied, the same 11,110‑node tree renders in about 0.19 seconds—a 99% reduction compared to the original 26‑second rendering time.

The implementation lives in Santd’s Tree component; readers can consult the official documentation and source code for deeper details.

References

Santd documentation: https://ecomfe.github.io/santd/#/components/tree

Santd source code: https://github.com/ecomfe/santd/blob/master/src/tree/Tree.js

High‑performance rendering article: https://juejin.cn/post/6844903982742110216

Virtual list/tree blog: https://ldc4.github.io/blog/virtual-tree/

Large‑data Tree component guide: https://cloud.tencent.com/developer/article/1554740