Results of DHTMLX Gantt 7.1.12 Performance Testing

Proper performance is one of the key factors in modern web apps for ensuring a convenient user experience even under high workloads. It is especially true when we are talking about project management tools that are frequently used for delivering large projects with thousands of tasks. Therefore, we are not surprised when web developers, who are interested in using DHTMLX Gantt in their projects, want to know more details about its performance before making a purchase decision. So it is time to explore the operating capabilities of the current version (v7.1.12) of our JavaScript Gantt component in different use-case scenarios.

In this blog post, you’ll get acquainted with the results of performance tests on Gantt charts built with DHTMLX and get an opportunity to run all tests by yourself.

General Information

Our team prepared a range of performance tests and ran them using different Gantt configurations. The main goal was to determine the maximum size of a project (number of tasks and dependency links) that could be loaded into a Gantt chart, while preserving “Smooth”, “Normal”, and “Acceptable” levels of the UI responsiveness.

More detailed information on the estimates of UI performance is provided below.

1) Smooth – the Gantt chart works flawlessly and users do not experience any noticeable UI delays.

The Gantt performance is rated as “Smooth” under the following conditions:

• The initial rendering time is less than 1 second.
• The UI delay time when a user performs a basic operation on project tasks (add, delete, edit) is less than 1 second.

2) Normal – everything is still fast and smooth, but it may take a few seconds for the Gantt chart to load and display initial data.

The Gantt performance is rated as “Normal” under the following conditions:

• The initial rendering time is less than 5 seconds.
• The UI delay time when a user performs a basic operation on project tasks (add, delete, edit) is less than 1 second.

3) Acceptable – users may experience noticeable UI delays, which, however, do not disrupt the workflow or get too irritating.

The Gantt performance is rated as “Acceptable” under the following conditions:

• The initial rendering time is less than 10 seconds.
• The UI delay time when a user performs a basic operation on project tasks (add, delete, edit) is less than 2.5 seconds.

We tested all Gantt configurations using the following general parameters:

• The duration of tasks is calculated in days.
• The smart rendering function is enabled.
• The time scale consists of two lines – days and months.
• The initial time range in the scale is 5 years.

Performance Testing Results for Different Gantt Configurations

Now let us consider the list of tested Gantt configurations and the obtained results.

1) Basic Gantt

First of all, we tested the Gantt chart with the most basic settings without any complex calculations. It renders only project tasks and dependency links between them within the Gantt chart timeline.

Here is a sample of test 1.

We got the following results:

1. up to 12000 tasks and dependencies – smooth (load <= 1 sec, UI delays <= 1 sec)
2. up to 32000 tasks and dependencies – normal (load <= 5 sec, UI delays <= 1 sec)
3. up to 81000 tasks and dependencies – acceptable (load <= 10 sec, UI delays <= 2.5 sec)

2) Gantt with auto scheduling

In this test case, we complemented a basic Gantt chart with the following functions:

• auto scheduling
• work time calculation

Here is a sample of test 2.

We got the following results:

1. up to 7000 tasks and dependencies – smooth (load <= 1 sec, UI delays <= 1 sec)
2. up to 17000 tasks and dependencies – normal (load <= 5 sec, UI delays <= 1 sec)
3. up to 61000 tasks and dependencies – acceptable (load <= 10 sec, UI delay <= 2.5 sec)

3) Gantt with auto scheduling and critical path

In this test case, we complemented a basic Gantt chart with the following functions:

• auto scheduling
• work time calculation
• critical path

Here is a sample of test 3.

We got the following results:

1. up to 6000 tasks and dependencies – smooth (load <= 1 sec, UI delays <= 1 sec)
2. up to 7400 tasks and dependencies – normal (loading <= 5 sec, UI delays <= 1 sec)
3. up to 9600 tasks and dependencies – acceptable (load <= 10 sec, UI delays <= 2.5 sec)

In this test, we detected a performance issue related to the critical path calculation. The use of this feature disproportionately slows things down in the current version (7.1) of the Gantt library. In the upcoming DHTMLX Gantt v7.2 release, we plan to significantly speed up the calculation of critical path, free slack, and total slack.

4) Gantt with resource diagram

In this test case, we complemented a basic Gantt chart with the following functions:

• work time calculation
• resource diagram

Here is a sample of test 4.

We got the following results:

1. up to 4300 tasks and dependencies, 60 resources – smooth (load <= 1 sec, UI delays <= 1 sec)
2. up to 7100 tasks and dependencies, 60 resources – normal (load <= 5 sec, UI delays <= 1 sec)
3. up to 12300 tasks and dependencies, 60 resources – acceptable (load <= 10 sec, UI delays <= 2.5 sec)

The resource load diagram is a heavy module and seriously affects the Gantt performance. We do not expect any significant performance improvements of this functionality in the upcoming DHTMLX Gantt update.

5) Gantt with resource diagram and auto planning

In this test case, we complemented a basic Gantt chart with the following functions:

• work time calculation
• resource diagram
• auto scheduling

Here is a sample of test 5.

We got the following results:

1. up to 3200 tasks and dependencies, 60 resources – smooth (load <= 1 sec, UI delays <= 1 sec)
2. up to 4700 tasks and dependencies, 60 resources – normal (load <= 5 sec, UI delays <= 1 sec)
3. up to 11000 tasks and dependencies, 60 resources – acceptable (load <= 10 sec, UI delays <= 2.5 sec)

6) Gantt with resource diagram, auto planning, and critical path

In this test case, we complemented a basic Gantt chart with the following functions:

• work time calculation
• critical path
• resource diagram
• auto-scheduling

Here is a sample of test 6.

We got the following results:

1. up to 2700 tasks and dependencies, 60 resources – smooth (load <= 1 sec, UI delays <= 1 sec)
2. up to 2800 tasks and dependencies, 60 resources – normal (load <= 5 sec, UI delays <= 1 sec)
3. up to 6200 tasks and dependencies, 60 resources – acceptable (load <= 10 sec, UI delays <= 2.5 sec)

Similar to test 3, the critical path calculation also impacts the UI performance.

Summary of Test Results

All test results are summed up in the table below:

1. In real-life usage, you can expect the result performance to be worse than what we got in our relatively simple examples after adding new settings and configurations.
2. Currently, the critical path module is quite slow and impacts the work of the whole component. But our team works on major optimizations, and we plan to bring in positive changes in v7.2.
3. The resource diagram is one more complex module that heavily impacts Gantt’s performance.
4. During Gantt performance testing, we used the following computers:

• Kubuntu 20.04, i7-9700F, 16GiB
• Windows 10, i7-4790k, 16GiB
• Windows 10, i3-2100 16GiB
• Windows 10, i3-5005U 12GiB
• Macbook Air, M1, 16GiB
• Windows 10, Ryzen 7 4800H, 16GiB

We ran all tests on each machine and got the maximum number of tasks for each specified performance range. The results provided in this post are the average values of tests on all machines.

As expected, the Gantt performance highly depends on the hardware configuration: modern high-end machines allow loading larger charts and ensure a smoother UI operation compared to underpowered office laptops.

In comparison with the average numbers presented above, more performant systems (Macbook Air M1, Ryzen 7 4800H) allowed loading 40-50% larger charts, while the least powerful devices from our list (i3-5005U, i3-2100) showed 30-40% worse results.

In test 6, for instance, the result is up to 2700 tasks and dependency links. At the same time, MacBook Air M1 allows you to work with 4500 tasks and enjoy maximum UI responsiveness, while a laptop with the i3 -5005U processor provides the same experience only with 1600 tasks.

Testing Algorithm

1. Open a given test sample.
2. Enter the initial data in the Tasks and Resources fields (the second one is optional). It is better to start with lower values, e.g. 1000 tasks and 50 resources.
3. Click on Generate data and Load data buttons.
4. Perform the following steps:
1. Collapse and expand the first task.
2. Create a new task using the ‘+’ button in the table.
3. Move/resize the task with the mouse.
4. Delete the task.
5. Check the completion time of data loading and other operations in the pop-up window.
6. Increase or decrease the number of tasks in the corresponding field to figure out maximum values for “Smooth”, “Normal”, and “Acceptable” UI responsiveness.

Conclusion

Analyzing the test results, it is safe to say that DHTMLX Gantt is a good choice for managing complex projects on a web page. Gantt charts built with our Javascript library provide decent performance even when using advanced features such as auto scheduling, critical path, and resource diagram. But there is always room for improvement, and we are working on that. For instance, we plan to enhance the Gantt performance with the use of critical path calculation in the upcoming update (v7.2).

For those web developers who want to evaluate in practice other aspects of DHTMLX Gantt after exploring the test results, we offer a free 30-day trial version.