Highcharts甘特图大量分组展开/折叠延迟问题优化求助

各位开发者朋友好，我最近基于Highcharts Gantt做了一个项目管理功能，额外加了批量展开/折叠所有分组/任务的按钮。功能本身能跑，但遇到了性能问题：分组数量少的时候操作很流畅，可一旦分组多到一定量级（比如34个），点击按钮后页面要卡很久才能响应。

举个实际场景：我现在的代码里，只处理前5个分组时（var tab_idx=[0,9,19,23,27];），展开/折叠几乎瞬间完成；但改成处理全部34个分组后，卡顿感特别明显，要等好久才能看到效果。

想请教下有没有更高效的实现方式，能让大量分组的展开/折叠操作更快？

我自己梳理的优化思路，供大家参考： #

我推测卡顿的核心原因是当前实现会触发多次图表重绘——每处理一个分组就触发一次重绘，几十次重绘叠加起来就拖慢了速度。分享几个可行的优化方向：

1. 批量操作时暂停图表重绘
   Highcharts提供了suspendRedraw()和resumeRedraw()方法，能让我们在批量修改节点状态时，先暂停图表的自动重绘，等所有操作完成后再一次性重绘。这样能把多次重绘合并成一次，性能提升非常明显。

修改后的代码示例：

// 先暂停图表重绘
chart.suspendRedraw();

// 遍历所有需要处理的分组，更新折叠状态时不立即重绘
tab_idx.forEach(function(idx) {
  const point = chart.series[0].points[idx];
  if (point) {
    // 第二个参数设为false，避免每次update都触发重绘
    point.update({ collapsed: !point.collapsed }, false);
  }
});

// 恢复重绘，一次性完成所有更新
chart.resumeRedraw();

2. 临时关闭动画效果
   动画效果虽然提升视觉体验，但在批量操作时会额外增加渲染开销。可以在操作前临时关闭动画，完成后再开启：

// 操作前关闭动画
chart.update({ chart: { animation: false } }, false);

// 这里执行批量展开/折叠逻辑...

// 操作完成后恢复动画
chart.update({ chart: { animation: true } });

3. 直接修改数据源批量更新
   如果你的数据源是可控的，也可以直接修改原始数据中每个分组的collapsed属性，然后调用chart.series[0].setData()一次性更新图表，这样能减少多次API调用的额外开销。

有没有朋友还有其他更优的方案？欢迎一起交流指点~

备注：内容来源于stack exchange，提问作者vegaelce