jstree 大數據量性能優化：懶加載與虛擬滾動實戰方案

性能瓶頸分析

jstree 預設一次性渲染所有節點，當節點超過 2000+ 時，DOM 節點暴增導致：

• 初始化阻塞主線程 2s+
• Checkbox 全選/反選遞歸遍歷凍結頁面
• 展開/收起動畫幀率極低

核心優化策略

1. 懶加載—— 按需請求子節點

$('#tree').jstree({
    core: {
        data: function (node, cb) {
            if (node.id === '#') {
                // 根節點：只請求第一層
                loadLevel(0).then(cb);
            } else {
                // 子節點：根據父 ID 請求下一層
                loadChildren(node.id).then(cb);
            }
        }
    }
});

後端接口需支持 parentId 分頁查詢，返回 {id, text, children: true/false, state: {opened: false}} 結構。

2. 虛擬滾動—— 僅渲染可視區域

引入 jstree-virtual-scrolling 插件或自行實現：

• 監聽容器 scroll 事件。
• 計算可視範圍內的節點索引區間。
• 動態插入/移除 DOM，保持 DOM 節點數 < 200。

3. Checkbox 全選優化

• 維護 Set selectedIds 而非遍歷 DOM。
• 「全選」改為記錄 allSelected = true + excludedIds，提交時由後端計算差集。
• 使用 jstree.checkbox 插件的 tie_selection: false 解耦選中狀態與 UI 高亮。

4. 其他微優化

• 關閉動畫：animation: 0。
• 啟用 core.worker: true（Web Worker 解析 JSON，需瀏覽器支持）。
• CSS contain: strict 限制重排範圍。

效果對比

落地建議

先上懶加載解決首屏加載，再視業務複雜度引入虛擬滾動。若節點極大（5萬+），建議後端提供搜索接口，前端改為「搜索即樹」模式，徹底避免全量樹渲染。