Performance Optimization Inquiry for Large-Scale Gantt Charts (v7.1.3 Pro)

Gantt
#1

Dear DHTMLX Gantt Support Team,

Greetings! I am using DHTMLX Gantt v7.1.3 Pro and have encountered performance challenges when working with large-scale projects (spanning 2-3 years). Despite following the recommendations in your Performance Guide, certain operations still block the main thread, leading to delays reported by users. Below are my questions and code snippets for clarity.

Issue 1: Slow Initial Calendar Configuration 

export const configGlobalCalendar = (calendars: Map<number, GanttCalendar> | undefined): void => {  
  const globalCalendar = gantt.getCalendar(GLOBAL_CALENDAR_ID);  
  if (!calendars) {  
    globalCalendar.setWorkTime({  
      hours: [WORKDAY_START, WORKDAY_END],  
      days: [false, true, true, true, true, true, false],  
    });  
    return;  
  }  
  const workDays: GanttWorkDay[] = [...calendars.values()].flatMap((c) => c.work_days);  

  workDays.forEach((workDay) => {  
    if (workDay.duration === 0) {  
      globalCalendar.setWorkTime({ date: workDay.date, hours: false });  
      return;  
    }  
    const calculateEndHour = WORKDAY_START + workDay.duration;  
    globalCalendar.setWorkTime({ date: workDay.date, hours: [WORKDAY_START, calculateEndHour] });  
  });  
};

Problem:
Looping through individual workdays (e.g., 2-3 years of data) and calling setWorkTime for each day takes 3-10 seconds, blocking the UI. I temporarily deferred this with setTimeout but seek a more robust solution.

Question 1:
Is there a batch method to configure multiple calendar dates at once, avoiding iterative setWorkTime calls?

Issue 2: Slow Task Copy/Paste via addItem() 

export const createGanttTask = (task: any, parent: number | string, index?: number, isNeedSelect?: boolean): number => {  
  const newTaskId = getTasksDatastore().addItem(task, index);  
  isNeedSelect && selectTask(newTaskId);  
  return newTaskId;  
};

Problem:
Adding tasks via addItem() takes 400–600 ms per task. Copying/pasting a section with 20 nested tasks causes significant delays.

Question 2:
Is there a batch insertion API or optimized workflow for adding multiple tasks simultaneously?

General Performance Strategy

Question 3:
For CPU-heavy operations (like calendar setup or task insertion), would you recommend:

  • Using Web Workers for partial processing (even if Gantt itself cannot run in a worker)?
  • Techniques like requestIdleCallback, requestAnimationFrame, or chunked setTimeout to avoid blocking the main thread?
  • Any other best practices for offloading work while ensuring Gantt updates correctly?

Additional Context:

  • I am aware Gantt relies on the DOM and cannot run entirely in a Web Worker. However, I hope to isolate non-DOM logic (e.g., data preprocessing) in workers.
  • Performance profiling confirms these operations are the primary bottlenecks.

Thank you for your time and expertise! I greatly appreciate any guidance to optimize these workflows.

Best regards,
Marat

#2

Hello Marat,

Problem:
Looping through individual workdays (e.g., 2-3 years of data) and calling setWorkTime for each day takes 3-10 seconds, blocking the UI. I temporarily deferred this with setTimeout but seek a more robust solution.
Question 1:
Is there a batch method to configure multiple calendar dates at once, avoiding iterative setWorkTime calls?

When you use the setWorkTime method, and the working hours are specified, Gantt generates additional settings for internal usage. So, it is expected that it takes some time to do that.

I tried to reproduce the issue in the following snippet:
https://snippet.dhtmlx.com/tjuotq23

But on my computer it only takes around 900ms to set the working time settings. If the dates are not calculated (hours: false), it takes around 500ms.

There is no built-in way to set calendar settings for several dates. But I think there is a workaround you can try. If the working time settings don’t change, you can copy the _worktime property of the calendar object after loading Gantt. Then, you can try saving it in the JSON format. After that, you can check if it helps you to load the calendar settings by parsing the settings and modifying the _worktime property.

Problem:
Adding tasks via addItem() takes 400–600 ms per task. Copying/pasting a section with 20 nested tasks causes significant delays.
Question 2:
Is there a batch insertion API or optimized workflow for adding multiple tasks simultaneously?

I don’t think it is recommended to use the addItem method for adding a new task when there is the addTask method. In any case, adding a task triggers various events, so, it will take some time to do that. If you don’t want to trigger any events, you can use the addTask method inside the silent function:
https://docs.dhtmlx.com/gantt/api__gantt_silent.html

Then you can use the render method to repaint the changes.

Also, if you use the parse method to load multiple tasks, it takes less time, and Gantt doesn’t send the changes to the server (unless you are using auto-scheduling and the tasks should be auto-scheduled).

Sending multiple requests to the server is not recommended as if something fails because of the network connectivity, a user would see the tasks in Gantt, but they won’t be saved on the server. In this case, it is better to send the changes to the server manually. For that, you can use the built-in AJAX module:
https://docs.dhtmlx.com/gantt/api__gantt_ajax_other.html

For CPU-heavy operations (like calendar setup or task insertion), would you recommend:
Using Web Workers for partial processing (even if Gantt itself cannot run in a worker)?

As the MDN documentation says, the window object is not available for the workers. This means, you cannot use that approach with Gantt:
Using Web Workers - Web APIs | MDN.

Also, we didn’t test this approach, so, I cannot tell you if it would work better.

Techniques like requestIdleCallback, requestAnimationFrame, or chunked setTimeout to avoid blocking the main thread?

Some code in Gantt runs synchronously. So, even if you call it after a timeout, it won’t help, because the UI will be blocked while the browser is busy processing the code from Gantt. There is no way to change how it works.

Any other best practices for offloading work while ensuring Gantt updates correctly?

You can use the Gantt version for Node.js:
https://docs.dhtmlx.com/gantt/desktop__using_gantt_on_server.html

This approach allows you to run Gantt in the Node.js environment to auto-schedule tasks, calculate the critical path or make some other calculations like working time settings. Then, you can populate the data to the client-side.
But there is no built-in solution for that. You will need to manually configure your application to synchronize the changes.

Alternatively, you can dedicate a computer, tab, or client-side session with Gantt that will calculate everything you need. Then you can implement a solution to synchronize the changes with other Gantts.