Leistung: Wege zur Verbesserung

Gängige Techniken

Gantt von DHTMLX unterstützt große Datensätze. Veröffentlichte Leistungsmessungen für Datensätze mit bis zu 100.000 Aufgaben finden Sie in den JavaScript-Gantt-Benchmarks. Um Gantt mit einem großen Datensatz zu sehen, öffnen Sie die Demo mit großem Datensatz.

Die Leistung in einer Anwendung hängt von ihrer Konfiguration, den Aufgabenabhängigkeiten, den Kalendern, dem benutzerdefinierten Rendering, dem Browser und der Hardware ab. Messen Sie die Serverantwort und die Datenübertragung getrennt vom clientseitigen Rendering und von der Planung.

Lassen Sie das Smart Rendering (Rendering-Virtualisierung) bei der Arbeit mit großen Datensätzen aktiviert. Wenn ein Vorgang in Ihrer Anwendung langsam ist, messen Sie ihn und wenden Sie die passenden der folgenden Techniken an:

1. Um das Hintergrundbild für den Timeline-Bereich statt der tatsächlichen Linien zu setzen (setzen Sie die static_background Option auf 'true'; Zellen mit benutzerdefinierten CSS-Klassen werden weiterhin als Zellen gerendert) (PRO-Funktionalität, lesen Sie die Details unten)
2. Um die anfängliche Datenübertragung und die Speichernutzung des Browsers zu verringern, wenn nur einige Zweige benötigt werden, verwenden Sie das dynamische Laden (setzen Sie die branch_loading Option auf 'true', PRO-Funktionalität)
3. Um eine gröbere Zeitskala zu verwenden (setzen Sie die unit-Eigenschaft der scales Option auf "month" oder "year" oder erhöhen Sie deren step)
4. Um den Bereich der anzeigbaren Daten zu verkleinern (verwenden Sie die start_date und end_date Optionen)
5. Um die Geschwindigkeit der Skalen-Darstellung zu erhöhen (aktivieren Sie die smart_scales Option, falls sie deaktiviert ist)
6. Wenn Sie Arbeitszeitkalender verwenden, stellen Sie sicher, dass die Arbeitszeiteinstellungen vor dem Laden der Daten in den Gantt festgelegt werden. Wenn Sie die Arbeitszeiteinstellungen nach dem Laden ändern, müssen die Dauern der betroffenen Aufgaben neu berechnet werden. Das geschieht möglicherweise nicht automatisch, daher muss Ihr Code dies gegebenenfalls übernehmen (siehe hier). Solche Neuberechnungen können die Initialisierungszeit Ihrer Anwendung erhöhen.
7. Wenn Sie die duration_unit Konfiguration auf "hour" oder "minute" festlegen, setzen Sie außerdem duration_step auf 1. Eine solche Kombination aktiviert bestimmte Optimierungen bei der Berechnung der Arbeitszeit, die nur funktionieren, wenn der Schritt auf 1 gesetzt ist. Beachten Sie, dass es wesentliche Leistungsunterschiede zwischen "optimized" und "non-optimized" Modi gibt.
8. Um mehrere Änderungen an Aufgaben oder Verknüpfungen mit einem einzigen Neuzeichnen anzuwenden, verwenden Sie batchUpdate.
9. Damit das Smart Rendering wirksam bleibt, aktivieren Sie die autosize Option bei großen Diagrammen nicht. Im Autosize-Modus vergrößert Gantt seinen Container, um alle Aufgaben anzuzeigen, sodass sich alle Zeilen im sichtbaren Bereich befinden und alle gerendert werden.
10. Um zusätzliche Neuzeichnungen zu vermeiden, aktivieren Sie highlight_critical_path nur dann, wenn Benutzer den kritischen Pfad sehen müssen. Solange diese Option aktiviert ist, wird bei jeder Änderung einer Aufgabe oder Verknüpfung das gesamte Diagramm neu gezeichnet.
11. Um den Rendering-Aufwand in der Timeline zu verringern, entfernen Sie die benutzerdefinierten Ebenen, die Sie nicht benötigen, insbesondere Ebenen, die häufig neu gezeichnet werden.
12. Um den Aufwand bei jeder Änderung zu verringern, prüfen Sie den benutzerdefinierten Code, der in Gantt-Event-Handlern und Templates ausgeführt wird. Wenn Ihr Code zum Beispiel den Fortschritt von Projekten berechnet, berechnen Sie ihn nur neu, wenn sich der Fortschritt einer Aufgabe ändert, nicht bei jeder Aktualisierung oder jedem Neuzeichnen. Dasselbe gilt für die Daten, die benutzerdefinierte Ebenen anzeigen.

Zugehöriges Beispiel: Leistungsoptimierungen

Smart Rendering

Smart Rendering ist die Implementierung der Rendering-Virtualisierung in DHTMLX Gantt. Es verbessert die Leistung bei großen Datensätzen, indem nur die Aufgaben und Verknüpfungen gerendert werden, die im Viewport sichtbar sind, während alle geladenen Daten verfügbar bleiben.

Ab Version v6.2 ist das Smart Rendering standardmäßig aktiviert, da es in die Kern-Datei dhtmlxgantt.js eingebettet ist. Daher müssen Sie die Datei dhtmlxgantt_smart_rendering.js nicht mehr in die Seite einbinden, damit Smart Rendering funktioniert.

Hinweis

Wenn Sie die Datei dhtmlxgantt_smart_rendering.js, die aus der alten Version stammt, einbinden, wird sie die Verbesserungen der neuen integrierten smart_rendering-Erweiterung überschreiben.

gantt.config.smart_rendering = false;

Zugehöriges Beispiel: Arbeiten mit 30000 Aufgaben

Das Smart Rendering von custom layers ermöglicht standardmäßig nur das vertikale Smart Rendering. Das bedeutet, dass die benutzerdefinierten Ebenen gerendert werden, wenn die Zeile der angegebenen Aufgabe im Viewport sichtbar ist. Aber die genauen Koordinaten eines benutzerdefinierten Elements können nicht berechnet werden, und die gesamte Zeile der Aufgabe in der Timeline wird als deren Position genommen.

Siehe den Artikel addTaskLayer, um zu erfahren, wie Sie das horizontale Smart Rendering für benutzerdefinierte Ebenen aktivieren.

Arbeiten mit einem großen Datumsbereich

Hinweis

Diese Funktionalität ist nur in der PRO-Version verfügbar

Wenn Sie in Ihrem Projekt einen großen Datumsbereich verwenden, können Sie zusätzlich zum Smart Rendering den static_background Parameter aktivieren, um das Hintergrundbild für den Zeitleistenbereich statt der tatsächlichen Linien zu rendern. Die Option ist standardmäßig deaktiviert.

gantt.config.static_background = true;

In diesem Modus werden die Zellen, die über die Templates timeline_cell_class oder timeline_cell_content eine CSS-Klasse oder Inhalt erhalten, weiterhin als Zellen über dem Hintergrundbild gerendert. Dafür müssen die Optionen show_task_cells und static_background_cells aktiviert sein (sie sind standardmäßig aktiviert).

Ab v6.3 rendert das Smart Rendering nur die Zellen im sichtbaren Teil der Timeline, daher ist der Effekt dieser Option geringer als in früheren Versionen. Die Option verringert außerdem die Größe der Anfrage an den Export-Server beim Exportieren von Daten.