UNPKG

18.5 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4<meta charset="utf-8"/>
5<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/>
6
7<link rel="stylesheet" href="../assets/css/style.css"/>
8<!-- Copyright 1998-2021 by Northwoods Software Corporation. --> <title> GoJS Performance Considerations -- Northwoods Software </title>
9 <link rel="stylesheet" href="../assets/css/prism.css" />
10 </head>
11 <script>
12
13 window.diagrams = [];
14 window.goCode = function(pre, w, h, parentid, animation) {
15 window.diagrams.push([pre, w, h, parentid, animation]);
16 }
17 </script>
18 <body>
19 <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
20 <div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
21 <div class="md:pl-4">
22 <a class="text-white hover:text-white no-underline hover:no-underline
23 font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
24 <h1 class="mb-0 p-1 ">GoJS</h1>
25 </a>
26 </div>
27 <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
28 <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
29 <path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
30 <path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
31 </svg>
32 </button>
33 <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
34 <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
35 <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
36 <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
37 <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
38 <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
39 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
40 <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
41 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
42 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
43 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
44 <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
45 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
46 </ul>
47 </div>
48 </div>
49 <hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
50 </nav>
51
52 <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
53
54 <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0">
55 <div class="flex-shrink-0 px-8 py-4">
56 <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation">
57 <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
58 <path id="navOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
59 <path id="navClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
60 </svg>
61 </button>
62 </div>
63 <nav id="navList" class="min-h-screen hidden md:block sidebar-nav flex-grow px-1 lg:px-4 pb-4 md:pb-0 md:overflow-y-auto break-words">
64 <a href="index.html">Basics</a>
65 <a href="buildingObjects.html">Building Parts</a>
66 <a href="usingModels.html">Using Models</a>
67 <a href="dataBinding.html">Data Binding</a>
68 <a href="react.html">GoJS with React</a>
69 <a href="angular.html">GoJS with Angular</a>
70 <a href="textBlocks.html">TextBlocks</a>
71 <a href="shapes.html">Shapes</a>
72 <a href="pictures.html">Pictures</a>
73 <a href="panels.html">Panels</a>
74 <a href="tablePanels.html">Table Panels</a>
75 <a href="brush.html">Brushes</a>
76 <a href="sizing.html">Sizing Objects</a>
77 <a href="itemArrays.html">Item Arrays</a>
78 <a href="changedEvents.html">Changed Events</a>
79 <a href="transactions.html">Transactions</a>
80 <a href="viewport.html">Coordinates</a>
81 <a href="initialView.html">Initial View</a>
82 <a href="collections.html">Collections</a>
83 <a href="links.html">Links</a>
84 <a href="linkLabels.html">Link Labels</a>
85 <a href="connectionPoints.html">Link Points</a>
86 <a href="ports.html">Ports</a>
87 <a href="nodes.html">Nodes</a>
88 <a href="debugging.html">Debugging</a>
89 <a href="layouts.html">Layouts</a>
90 <a href="trees.html">Trees</a>
91 <a href="subtrees.html">SubTrees</a>
92 <a href="groups.html">Groups</a>
93 <a href="subgraphs.html">SubGraphs</a>
94 <a href="sizedGroups.html">Sized Groups</a>
95 <a href="selection.html">Selection</a>
96 <a href="highlighting.html">Highlighting</a>
97 <a href="animation.html">Animation</a>
98 <a href="toolTips.html">ToolTips</a>
99 <a href="contextmenus.html">Context Menus</a>
100 <a href="events.html">Diagram Events</a>
101 <a href="tools.html">Tools</a>
102 <a href="commands.html">Commands</a>
103 <a href="permissions.html">Permissions</a>
104 <a href="validation.html">Validation</a>
105 <a href="HTMLInteraction.html">HTML Interaction</a>
106 <a href="layers.html">Layers &amp; Z-ordering</a>
107 <a href="palette.html">Palette</a>
108 <a href="overview.html">Overview</a>
109 <a href="resizing.html">Resizing Diagrams</a>
110 <a href="replacingDeleting.html">Replacing and Deleting</a>
111 <a href="buttons.html">Buttons</a>
112 <a href="templateMaps.html">Template Maps</a>
113 <a href="legends.html">Legends and Titles</a>
114 <a href="extensions.html">Extensions</a>
115 <a href="geometry.html">Geometry Strings</a>
116 <a href="grids.html">Grid Patterns</a>
117 <a href="graduatedPanels.html">Graduated Panels</a>
118 <a href="makingImages.html">Diagram Images</a>
119 <a href="makingSVG.html">Diagram SVG</a>
120 <a href="printing.html">Printing</a>
121 <a href="serverSideImages.html">Server-side Images</a>
122 <a href="nodeScript.html">GoJS in Node.js</a>
123 <a href="testing.html">Testing</a>
124 <a href="storage.html">Storage</a>
125 <a href="performance.html">Performance</a>
126 <a href="source.html">Building from Source</a>
127 <a href="platforms.html">Platforms</a>
128 <a href="deployment.html">Deployment</a>
129 </nav>
130 </div>
131 <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden">
132
133
134
135
136<h1>Performance Considerations</h1>
137
138<p>
139 Getting good performance for your diagrams does not require any effort on your part when
140 the diagrams are limited to a few hundreds of nodes and links, especially on the desktop.
141 However when your app might deal with thousands or tens of thousands of nodes and links,
142 you may need to adapt your implementation to avoid expensive features.
143</p>
144
145<p>
146 The perceived performance of your diagram depends on many different factors.
147</p>
148<ul>
149 <li>JavaScript code is normally several to many times slower than Java or .NET code
150 on the same hardware platform.</li>
151 <li>JavaScript code performance varies between different browsers and versions of browsers.</li>
152 <li>Memory limitations, particularly on mobile devices, affect performance.</li>
153 <li>There can be a wide variation of drawing performance on different platforms.</li>
154 <li>Drawing and animation effects take resources.</li>
155 <li>Complicated nodes or links are slower to build and update and draw than simple ones.</li>
156 <li>Some layouts are inherently slower than others.</li>
157</ul>
158
159<h2 id="EffectsAndAppearances">Effects and Appearances</h2>
160<p>
161 Shadows are relatively expensive to draw, so consider not setting <a>Part.isShadowed</a> to true.
162 Gradient <a>Brush</a>es are slower to draw than solid colors.
163 Complex <a>Shape</a> <a>Geometry</a>s are slower to draw than simpler ones, and they require more
164 computation when computing intersections.
165</p>
166<p>
167 Animation takes up resources; consider setting <a>AnimationManager.isEnabled</a> to false.
168</p>
169
170<h2 id="ConstructingAndSizingNodes">Constructing and Sizing Nodes</h2>
171<p>
172 Keep your Nodes and Links as simple as you can make it.
173 Limit how many GraphObjects that you use in your templates.
174 Use simpler Panel types when feasible -- the "Table" Panel is the most featureful,
175 but maybe you can just use a "Horizontal" or a "Vertical" or a "Spot" or an "Auto" Panel.
176 A Panel should have two or more elements in them (although there can be exceptions).
177 If you have no elements in a Panel, delete the panel.
178 If you have only one element in a Panel, consider removing the panel and merging the element
179 into the panel's containing panel.
180</p>
181<p>
182 Do not include objects that are not visible.
183 Limit how much data binding that you use, and avoid <a>Binding</a>s with no source property name
184 or that are <a>Binding.ofObject</a>.
185</p>
186<p>
187 If you have a <a>Picture</a> and you know its intended size beforehand,
188 it's best to set its <a>GraphObject.desiredSize</a>
189 (or <a>GraphObject.width</a> and <a>GraphObject.height</a>)
190 so that it does not have to re-measured once the image loads.
191 When nodes change size a <a>Layout</a> might need to be performed again,
192 so having fixed size nodes helps reduce diagram layouts.
193 In general, setting <a>GraphObject.desiredSize</a> on the elements of your nodes,
194 especially <a>Picture</a>s, will speed up how quickly <b>GoJS</b> can measure and arrange
195 the <a>Panel</a>s that form your Nodes or Links.
196</p>
197
198<h2 id="Links">Links</h2>
199<p>
200 The <a>Link.routing</a> property value <a>Link,AvoidsNodes</a> can be slow in very large graphs.
201 Consider not using it in performance-minded large graphs,
202 or setting it only after the intial layout is completed (use "InitialLayoutCompleted" <a href="events.html">Diagram event listener</a>),
203 or ideally setting it at that time only on select Links.
204</p>
205<p>
206 Using a <a>Link.curve</a> value of either <a>Link,JumpOver</a> or <a>Link,JumpGap</a> is a lot slower than not
207 having to compute all the points where such links cross and drawing the small arc or drawing a gap.
208</p>
209
210<h2 id="Layouts">Layouts</h2>
211<p>
212 <a>GridLayout</a> and <a>TreeLayout</a> are fast. <a>LayeredDigraphLayout</a> is slow.
213</p>
214
215<h2 id="Virtualization">Virtualization</h2>
216<p>
217 For diagrams with many nodes and links that only display a fraction of them at a time,
218 you could implement some form of virtualization to optimize your diagram.
219 The <a href="../samples/virtualizedTree.html">Virtualized Tree sample</a> contains 123,456
220 total nodes, yet is fairly quick to load and render, because it only constructs nodes
221 and links that intersect with the viewport.
222</p>
223<p>
224 But this does complicate the implementation of the diagram, because you need to use a
225 separate model from the <a>Diagram.model</a> and manage adding and removing Nodes and
226 Links when the viewport changes.
227 Furthermore layout is more complicated because it needs to work on <a>LayoutVertex</a>es
228 and <a>LayoutEdge</a>s, not on <a>Node</a>s and <a>Link</a>s.
229</p>
230<p>
231 Other virtualization samples are listed in the <a href="../samples/index.html#performance">samples index</a>.
232</p>
233
234<h2 id="OtherConsiderations">Other considerations</h2>
235<p>
236 If you want to disassociate the Diagram from the HTML Div element, set <a>Diagram.div</a> to null.
237 If you remove a part of the HTML DOM containing a Div with a Diagram, you will need to
238 set <a>Diagram.div</a> to null in order for the page to garbage collect the memory.
239</p>
240<p>
241 Depending on your app, it may be worthwhile to selectively toggle off some features
242 (like shadows and animation) or to use simpler templates altogether,
243 when slower environments are present, such as on mobile devices.
244</p>
245<p>
246 You can use multiple templates depending on your zoom level.
247 If you are zoomed out far enough (and therefore have a lot of nodes on the screen)
248 you can switch to a simplified template so that rendering (when panning, dragging, etc) is faster.
249 The process of switching templates has a performance cost, though,
250 since Parts have to rebuild themselves.
251</p>
252
253<p>
254 If you think you have a unique or high node count Diagramming situation that may benefit from other drawing optimizations, <a href="https://www.nwoods.com/contact.html">contact support</a>.
255</p>
256
257 </div>
258 </div>
259
260 <div class="bg-nwoods-primary">
261 <section class="max-w-screen-lg text-white container mx-auto py-2 px-12">
262 <p id="version" class="leading-none mb-2 my-4">GoJS</p>
263 </section>
264 </div><footer class="bg-nwoods-primary text-white">
265 <div class="container max-w-screen-lg mx-auto px-8">
266 <div class="w-full py-6">
267
268 <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8">
269 <ul class="text-sm font-medium pb-14 sm:pb-20 grid grid-cols-1 sm:grid-cols-3 gap-y-10">
270 <li class="list-none row-span-2">
271 <h2 class="text-base font-semibold tracking-wide">GoJS</h2>
272 <ul class="list-none space-y-4 md:space-y-1 px-0">
273 <li>
274 <a href="../samples/index.html">Samples</a>
275 </li>
276 <li>
277 <a href="../learn/index.html">Learn</a>
278 </li>
279 <li>
280 <a href="../intro/index.html">Intro</a>
281 </li>
282 <li>
283 <a href="../api/index.html">API</a>
284 </li>
285 <li>
286 <a href="../changelog.html">Changelog</a>
287 </li>
288 <li>
289 <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a>
290 </li>
291 </ul>
292 </li>
293 <li class="list-none row-span-2">
294 <h2 class="text-base font-semibold tracking-wide">Support</h2>
295 <ul class="list-none space-y-4 md:space-y-1 px-0">
296 <li>
297 <a href="https://www.nwoods.com/contact.html"
298 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a>
299 </li>
300 <li>
301 <a href="https://forum.nwoods.com/c/gojs">Forum</a>
302 </li>
303 <li>
304 <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a>
305 </li>
306 <li>
307 <a href="https://www.nwoods.com/sales/index.html"
308 target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a>
309 </li>
310 <li>
311 <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a>
312 </li>
313 </ul>
314 </li>
315 <li class="list-none row-span-2">
316 <h2 class="text-base font-semibold tracking-wide">Company</h2>
317 <ul class="list-none space-y-4 md:space-y-1 px-0">
318 <li>
319 <a href="https://www.nwoods.com">Northwoods</a>
320 </li>
321 <li>
322 <a href="https://www.nwoods.com/about.html">About Us</a>
323 </li>
324 <li>
325 <a href="https://www.nwoods.com/contact.html">Contact Us</a>
326 </li>
327 <li>
328 <a href="https://twitter.com/northwoodsgo">Twitter</a>
329 </li>
330
331 </ul>
332 </li>
333 </ul>
334
335
336 <p class="text-sm text-gray-100 md:mb-6">
337 Copyright 1998-2021 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a>
338 </p>
339 </div>
340 </div>
341</footer> </body>
342
343<script async src="https://www.googletagmanager.com/gtag/js?id=UA-1506307-5"></script>
344<script>
345 window.dataLayer = window.dataLayer || [];
346 function gtag(){dataLayer.push(arguments);}
347 gtag('js', new Date()); gtag('config', 'UA-1506307-5');
348 var getOutboundLink = function(url, label) {
349 gtag('event', 'click', {
350 'event_category': 'outbound',
351 'event_label': label,
352 'transport_type': 'beacon'
353 });
354 }
355
356 // topnav
357 var topButton = document.getElementById("topnavButton");
358 var topnavList = document.getElementById("topnavList");
359 topButton.addEventListener("click", function() {
360 this.classList.toggle("active");
361 topnavList.classList.toggle("hidden");
362 document.getElementById("topnavOpen").classList.toggle("hidden");
363 document.getElementById("topnavClosed").classList.toggle("hidden");
364 });
365</script>
366 <script src="../assets/js/prism.js"></script>
367 <script src="../release/go.js"></script>
368 <script src="../assets/js/goDoc.js"></script>
369 <script>
370 document.addEventListener("DOMContentLoaded", function() {
371 if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version;
372 if (window.goDoc) window.goDoc();
373 var d = window.diagrams;
374 for (var i = 0; i < d.length; i++) {
375 var dargs = d[i];
376 goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]);
377 }
378 if (window.extra) window.extra();
379 });
380 </script>
381</html>