Производительность: Способы повышения
Общие техники
DHTMLX Gantt поддерживает большие наборы данных. Опубликованные измерения производительности для наборов данных до 100 000 задач доступны в бенчмарках JavaScript Gantt. Чтобы увидеть Gantt с большим набором данных, откройте демо с большим набором данных.
Производительность в прил ожении зависит от его конфигурации, зависимостей между задачами, календарей, пользовательской отрисовки, браузера и оборудования. Измеряйте время ответа сервера и передачу данных отдельно от клиентской отрисовки и планирования.
Держите умную отрисовку (виртуализацию отрисовки) включённой при работе с большими наборами данных. Если операция в вашем приложении выполняется медленно, измерьте её и примените подходящие техники из списка ниже:
- Установить фоновое изображение для области таймлайна вместо отрисовки фактических линий (установить опцию static_background в 'true'; ячейки с пользовательскими CSS-классами по-прежнему отрисовываются как ячейки) (функциональность PRO, прочитайте детали ниже)
- Сократить начальную передачу данных и использование памяти браузера, когда нужны только некоторые ветки, с помощью динамической загрузки (установить опцию branch_loading в 'true', функциональность PRO)
- Использовать б олее крупную шкалу времени (установить свойство unit опции scales на "month" или "year" либо увеличить её step)
- Уменьшить диапазон отображаемых дат (использовать опции start_date и end_date)
- Повысить скорость отрисовки шкал (включить опцию smart_scales, если она отключена)
- Если вы используете календари рабочего времени, обязательно настройте параметры рабочего времени до загрузки данных в Gantt. Если вы изменяете параметры рабочего времени после загрузки, продолжительности затронутых задач необходимо пересчитать. Это может не произойти автоматически, поэтому пересчёт может потребоваться выполнить в вашем коде (см. как). Такие пересчёты могут увеличить время инициализации вашего приложения.
- Если вы задаёте конфигурацию duration_unit как "hour" или "minute", обязательно установите duration_step равным 1. Такое сочетание активирует определённые оптимизации для расчётов рабочего времени, которые работают только когда шаг установлен в 1. Обратите внимание, что между режимами "оптимизированный" и "неоптимизированный" существенно различается производительность.
- Применять несколько изменений задач или связей с одной перерисовкой, используя batchUpdate.
- Чтобы умная отрисовка оставалась эффективной, не включайте опцию autosize для больших диаграмм. В режиме autosize Gantt увеличивает свой контейнер, чтобы показать все задачи, поэтому все строки находятся в видимой области и все они отрисовываются.
- Чтобы избежать лишних перерисовок, включайте highlight_critical_path только тогда, когда пользователям нужно видеть критический путь. Пока эта опция включена, каждое изменение задачи или связи перерисовывает всю диаграмму.
- Чтобы сократить работу по отрисовке на таймлайне, удалите пользовательские слои, которые вам не нужны, особенно слои, которые часто перерисовываются.
- Чтобы сократить работу при каждом изменении, проверьте пользовательский код, который выполняется в обработчиках событий и шаблонах Gantt. Например, если ваш код вычисляет прогресс проектов, пересчитывайте его только при изменении прогресса задачи, а не при каждом обновлении или перерисовке. То же относится к данным, которые показывают пользовательские слои.
Связанный пример: Оптимизации производительности
Умная отрисовка
Техника Умной отрисовки значительно ускоряет скорость отображения данных при работе с большими объёмами данных. В этом режиме отрисовываются только задачи и связи, видимые на экране в данный момент.
Начиная с v6.2, умная отрисовка включена по умолчанию, так как она входит в ядро файла dhtmlxgantt.js. Таким образом, вам не нужно подключать файл dhtmlxgantt_smart_rendering.js на страницу, чтобы умная отрисовка работала.
Если вы подключите файл dhtmlxgantt_smart_rendering.js, который относится к старой версии, он перекроет улучшения нового встроенного расширения smart_rendering.
Если вам нужно отключить режим умной отрисовки, вы можете задать соответствующий параметр конфигурации в значение false:
gantt.config.smart_rendering = false;
Связанный пример: Работа с 30000 задач
Умная отрисовка пользовательских слоёв по умолчанию поддерживает только вертикальную умную отрисовку. Это означает, что пользовательские слои будут отрисовываться, когда строка указанной задачи находится в области просмотра. Но точные координаты пользовательского элемента вычислить невозможно, и вся строка задачи на шкале принимается за его положение.
Вы можете обратиться к статье addTaskLayer, чтобы узнать, как включить горизонтальную умную отрисовку для пользовательских слоёв.
Работа с большим диапазоном дат
Эта функциональность доступна только в PRO версии
Если в вашем проекте используется большой диапазон дат, вы можете включить параметр static_background в дополнение к умной отрисовке, чтобы задать фоновое изображение для области таймлайна вместо отрисовки реальных линий. Опция по умолчанию отключена.
gantt.config.static_background = true;
В этом режиме ячейки, которые получают CSS-класс или содержимое из шаблонов timeline_cell_class или timeline_cell_content, по-прежнему отрисовываются как ячейки поверх фонового изображения. Для этого опции show_task_cells и static_background_cells должны быть включены (по умолчанию они включены).
Начиная с v6.3, умная отрисовка отрисовывает только ячейки в видимой части временной шкалы, поэтому влияние этой опции меньше, чем в более ранних версиях. Опция также уменьшает размер запроса к серверу экспорта при экспорте данных.