性能优化:提升方法

常用技术

当任务数量达到 10,000 到 20,000 条时,根据您的配置和插件,您可能会注意到在页面上渲染甘特图时出现一定的延迟。

以下是几种应对该问题的方法:

  1. 禁用单元格渲染,仅渲染行(将 show_task_cells 选项设置为 'false')。
  2. 在时间线区域使用背景图片代替实际线条渲染(将 static_background 选项设置为 'true')(PRO 功能,适用于 v6.3 之前的版本,详见下文)。
  3. 启用动态加载(将 branch_loading 选项设置为 'true')。
  4. 通过设置 scales 选项的 unit 属性为 "month" 或 "year" 来增加时间刻度的步长。
  5. 缩小可显示日期的范围(使用 start_dateend_date 选项)。
  6. 移除任务的进度条(将 show_progress 选项设置为 'false')。
  7. 如果尚未启用,可通过开启 smart_scales 选项来加快刻度渲染速度。
  8. 如果使用了 工作时间日历,请务必在加载数据前配置工作时间设置。否则,任务工期会被重新计算两次——一次在加载任务时,另一次在应用新日历时。虽然不会造成错误,但可能会增加应用初始化时间。
  9. 如果将 duration_unit 配置为 "hour" 或 "minute",请确保 duration_step 设置为 1。该组合会触发仅在步长为 1 时有效的工作时间计算优化。请注意,“优化”与“非优化”模式之间存在显著性能差异。

Related sample:  Performance tweaks

智能渲染

智能渲染在处理大量数据时能显著提升数据渲染速度。此模式仅渲染当前屏幕可见的任务和链接。

自 v6.2 版本起,智能渲染已默认集成在核心 dhtmlxgantt.js 文件中,无需再单独引入 dhtmlxgantt_smart_rendering.js 文件。

如果您引入了旧版 dhtmlxgantt_smart_rendering.js 文件,将会覆盖新内置 smart_rendering 扩展的改进。

如需关闭智能渲染,可将配置参数设置为 false:

gantt.config.smart_rendering = false;

Related sample:  Working with 30000 tasks

常规的智能渲染流程会检查甘特图元素的位置是否在可视区域内,并决定是否显示该元素。

然而,对于 自定义层 的智能渲染,默认仅支持垂直方向的智能渲染。这意味着自定义层会在任务所在行可见时渲染,但无法计算自定义元素的具体水平方向位置,因此整个任务行会被视为其位置。
关于如何为自定义层启用水平方向智能渲染,详见 addTaskLayer 文章。

处理大时间范围

此功能仅在 PRO 版本中提供

如果您的项目使用了较大的时间范围,并且甘特图版本低于 v6.3,则可以结合启用 static_background 选项和智能渲染,在时间线区域使用背景图片代替实际线条渲染。

gantt.config.static_background = true;

对于 v6.3 及以上版本,该选项主要用于在数据导出时减少发送到导出服务器的请求大小。

Back to top