GoJS is a powerful, fast and lightweight flowchart control that can help you create flowcharts in JavaScript and HTML5 Canvas programs, and greatly simplify your JavaScript / Canvas programs.
Huidu.com free click to download the latest version of GoJS
Performance considerations
When the chart is limited to hundreds of nodes and links, especially on the desktop, getting good performance for the chart does not require you to put in any effort. However, when your application may handle thousands of nodes and links, you may need to adjust the implementation to avoid expensive features.
The perceived performance of the chart depends on many different factors.
- On the same hardware platform, JavaScript code is usually several to several times slower than Java or .NET code.
- The performance of JavaScript code varies between different browsers and browser versions.
- Memory limitations (especially on mobile devices) can affect performance.
- The graphics performance on different platforms may vary greatly.
- Drawing and animation effects take up resources.
- Complex nodes or links are constructed, updated and drawn more slowly than simple nodes or links.
- Some layouts are inherently slower than others.
Effect and appearance
Drawing shadows is relatively expensive, so please consider not setting Part.isShadowed to true. Gradient brushes draw slower than solid colors. Complicated shape geometry is slower than simple shape geometry, and requires more calculations when calculating intersection points.
Animation takes up resources; consider setting AnimationManager.isEnabled to false.
Construct and resize nodes
Keep nodes and links as simple as possible. Limit the number of GraphObjects used in the template. Use the simpler panel type when feasible-the "Table" panel is the most powerful, but maybe you can just use the "Horizontal" panel, "Vertical" panel, "Spot" panel or "Auto" panel. The panel should contain two or more elements (although there may be exceptions). If there are no elements in the panel, delete the panel. If there is only one element in the panel, consider removing the panel and incorporating that element into the panel's containing panel.
Does not include invisible objects. Limit how much data binding is used, and avoid binding the passive property name of s or Binding.ofObject.
If you have a picture and you know its expected size in advance, it is best to set its GraphObject.desiredSize (or GraphObject.width and GraphObject.height) so that you don't have to remeasure it after the image is loaded. When a node changes size, it may be necessary to perform "layout" again, so nodes with a fixed size help reduce the layout of the graph. Usually, setting GraphObject.desiredSize on the elements of a node, especially Picture, will speed up the speed of GoJS measuring and arranging the Panel that constitutes a node or link.
link
In very large graphs, the Link.routing property value Link.AvoidsNodes may slow down. Consider not to use it in large graphs where performance is important, or do not plan to set it after the initial layout is complete (using the "InitialLayoutCompleted" Diagram event listener), or it is better to set it only on select links at that time.
Using the Link.curve value of Link.JumpOver or Link.JumpGap is much slower than not having to calculate such link intersections and draw small arcs or draw all points of gaps.
Layout
GridLayout and TreeLayout are fast. LayeredDigraphLayout is very slow.
Virtualization
For charts with many nodes and links, which only show a small part of them at a time, you can implement some form of virtualization to optimize your chart. The "virtual tree" example contains a total of 123,456 nodes, but since it only constructs nodes and links that intersect the viewport, it loads and renders quite quickly.
But this does complicate the implementation of the diagram, because you need to use a different model than Diagram.model and manage the addition and removal of nodes and links when the viewport changes. In addition, the layout is more complicated because it needs to work on LayoutVertex and LayoutEdge instead of Node and Link.
Other virtualization examples are listed in the examples index.
Other considerations
If you want to cancel the association between the diagram and the HTML Div element, please set Diagram.div to null. If you delete a part of the HTML DOM that contains Div with a diagram, you need to set Diagram.div to null to enable the page to garbage collect memory.
Depending on your application, when there is a slower environment (such as on mobile devices), it may be worthwhile to selectively turn off certain features (such as shadows and animations) or use simpler templates altogether.
You can use multiple templates, depending on your zoom level. If you zoom out far enough (so there are many nodes on the screen), you can switch to a simplified template for faster rendering (when panning, dragging, etc.). However, the process of switching templates reduces performance because the parts must be rebuilt on their own.
If you think you can benefit from other graphics optimizations, you will encounter unique or large number of nodes, please contact customer service.
If you want to buy a genuine GoJS license, or for more product information, please click [Consult Online Customer Service]
This article is reproduced from [Huidu Technology] evget welcomes any form of reprinting, but please be sure to indicate the source and not modify the original related links, respect Other people's work