性能:提升性能的方法
常用技巧
从 10,000–20,000 个任务开始,取决于你使用的配置选项和插件,页面上的甘特图渲染可能会有延迟。
下面是解决此问题的几种方法:
- 禁用单个单元格的渲染,仅保留行的渲染(将 show_task_cells 选项设置为 'false')
- 将时间轴区域的背景图像设置为显示,而不是渲染实际的线条(将 static_background 选项设置为 'true')(PRO 功能,对于 v6.3 之前的版本,请在下方读取详情)
- 启用动态加载(将 branch_loading 选项设置为 'true')
- 增大刻度的步长(将 scales 选项的 unit 属性设置为 "month" 或 "year")
- 缩小可显示日期的范围(使用 start_date 和 end_date 选项)
- 从任务中移除进度条(将 show_progress 选项设置为 'false')
- 提升刻度渲染的速度(若未启用,请启用 smart_scales 选项)
- 如果你使用 work time calendars,请在加载数据到甘特图之前设置工作时间设置。否则,所有任务的持续时间将在加载任务时首次计算一次,在应用新日历时再次计算一次。无论如何,一切都应正常工作,但这种重新计算可能会增加应用程序的初始化时间。
- 如果将 duration_unit 配置设置为 "hour" 或 "minute",请确保将 duration_step 设置为 1。这种组合在工作时间计算中激活某些优化,只有步长设置为 1 时才起作用。请注意,"优化" 模式与 "非优化" 模式之间存在显著的性能差异。
相关示例: Performance tweaks
智能渲染
智能渲染技术在处理大量数据时能够显著提升数据渲染的速度。在此模式下,只对屏幕上当前可见的任务和链接进行渲染。
从 v6.2 开始,智能渲染默认启用,因为它已包含在核心的 dhtmlxgantt.js 文件中。因此,你不需要在页面中包含 dhtmlxgantt_smart_rendering.js 文件来使智能渲染工作。
注释
如果你连接了来自旧版本的 dhtmlxgantt_smart_rendering.js 文件,它将覆盖新内置的 smart_rendering 扩展的改进。
如果你需要禁用智能渲染模式,可以将相应的配置参数设置为 false:
gantt.config.smart_rendering = false;
相关示例: Working with 30000 tasks
普通智能渲染的过程是检查甘特图元素的位置是否落在屏幕可见区域内,并据此决定是否显示。
然而, custom layers 的智能渲染默认仅启用垂直方向的智能渲染。这意味着,当指定任务的行位于视口中时,自定义图层将被渲染。但自定义元素的确切坐标无法计算,因此在时间轴上,整行任务将被视为其位置。
你可以参考 addTaskLayer 文章,了解如何为自定义图层启用水平智能渲染。
处理大日期范围
注释
该功能仅在 PRO 版本中可用
如果在你的项目中使用较大的日期范围,且 Gantt 版本在 v6.3 之前,你可以在智能渲染之外启用 static_background 参数,以在时间轴区域设置背景图像而不是渲染实际的线条。
gantt.config.static_background = true;
对于 Gantt 版本高于 v6.3,此配置选项仅在你导出数据时希望减少导出服务器请求大小时才有用。
Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.