gojs

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/> <link rel="stylesheet" href="../assets/css/style.css"/>  <title> GoJS Performance Considerations -- Northwoods Software </title> <link rel="stylesheet" href="../assets/css/prism.css" /> </head> <script> window.diagrams = []; window.goCode = function(pre, w, h, parentid, animation) { window.diagrams.push([pre, w, h, parentid, animation]); } </script> <body> <nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary"> <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"> <div class="md:pl-4"> <a class="text-white hover:text-white no-underline hover:no-underline font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../"> <h1 class="my-0 p-1 ">GoJS</h1> </a> </div> <button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <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> <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> </svg> </button> <div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20"> <ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0"> <li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li> <li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li> </ul> </div> </div> <hr class="border-b border-gray-600 opacity-50 my-0 py-0" /> </nav> <div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto"> <div id="navSide" class="flex flex-col w-full md:w-40 lg:w-48 text-gray-700 bg-white flex-shrink-0"> <div class="flex-shrink-0 px-8 py-4"> <button id="navButton" class="rounded-lg md:hidden focus:outline-none focus:ring" aria-label="Navigation"> <svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6"> <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> <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> </svg> </button> </div> <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"> <a href="index.html">Basics</a> <a href="buildingObjects.html">Building Parts</a> <a href="usingModels.html">Using Models</a> <a href="dataBinding.html">Data Binding</a> <a href="react.html">GoJS with React</a> <a href="angular.html">GoJS with Angular</a> <a href="textBlocks.html">TextBlocks</a> <a href="shapes.html">Shapes</a> <a href="pictures.html">Pictures</a> <a href="panels.html">Panels</a> <a href="tablePanels.html">Table Panels</a> <a href="brush.html">Brushes</a> <a href="sizing.html">Sizing Objects</a> <a href="itemArrays.html">Item Arrays</a> <a href="changedEvents.html">Changed Events</a> <a href="transactions.html">Transactions</a> <a href="viewport.html">Coordinates</a> <a href="initialView.html">Initial View</a> <a href="collections.html">Collections</a> <a href="links.html">Links</a> <a href="linkLabels.html">Link Labels</a> <a href="connectionPoints.html">Link Points</a> <a href="ports.html">Ports</a> <a href="nodes.html">Nodes</a> <a href="typings.html">Typings</a> <a href="debugging.html">Debugging</a> <a href="layouts.html">Layouts</a> <a href="trees.html">Trees</a> <a href="subtrees.html">SubTrees</a> <a href="groups.html">Groups</a> <a href="subgraphs.html">SubGraphs</a> <a href="sizedGroups.html">Sized Groups</a> <a href="selection.html">Selection</a> <a href="highlighting.html">Highlighting</a> <a href="animation.html">Animation</a> <a href="toolTips.html">ToolTips</a> <a href="contextmenus.html">Context Menus</a> <a href="events.html">Diagram Events</a> <a href="tools.html">Tools</a> <a href="commands.html">Commands</a> <a href="permissions.html">Permissions</a> <a href="validation.html">Validation</a> <a href="HTMLInteraction.html">HTML Interaction</a> <a href="layers.html">Layers & Z-ordering</a> <a href="palette.html">Palette</a> <a href="overview.html">Overview</a> <a href="resizing.html">Resizing Diagrams</a> <a href="replacingDeleting.html">Replacing and Deleting</a> <a href="buttons.html">Buttons</a> <a href="templateMaps.html">Template Maps</a> <a href="legends.html">Legends and Titles</a> <a href="extensions.html">Extensions</a> <a href="geometry.html">Geometry Strings</a> <a href="grids.html">Grid Patterns</a> <a href="graduatedPanels.html">Graduated Panels</a> <a href="makingImages.html">Diagram Images</a> <a href="makingSVG.html">Diagram SVG</a> <a href="printing.html">Printing</a> <a href="serverSideImages.html">Server-side Images</a> <a href="nodeScript.html">GoJS in Node.js</a> <a href="testing.html">Testing</a> <a href="storage.html">Storage</a> <a href="performance.html">Performance</a> <a href="source.html">Building from Source</a> <a href="platforms.html">Platforms</a> <a href="deployment.html">Deployment</a> </nav> </div> <div class="pt-4 px-2 md:px-0 lg:px-4 pb-16 w-full overflow-hidden"> <h1>Performance Considerations</h1> <p> Getting good performance for your diagrams does not require any effort on your part when the diagrams are limited to a few hundreds of nodes and links, especially on the desktop. However when your app might deal with thousands or tens of thousands of nodes and links, you may need to adapt your implementation to avoid expensive features. </p> <p> The perceived performance of your diagram depends on many different factors. </p> <ul> <li>JavaScript code is normally several to many times slower than Java or .NET code on the same hardware platform.</li> <li>JavaScript code performance varies between different browsers and versions of browsers.</li> <li>Memory limitations, particularly on mobile devices, affect performance.</li> <li>There can be a wide variation of drawing performance on different platforms.</li> <li>Drawing and animation effects take resources.</li> <li>Complicated nodes or links are slower to build and update and draw than simple ones.</li> <li>Some layouts are inherently slower than others.</li> </ul> <h2 id="EffectsAndAppearances">Effects and Appearances</h2> <p> Shadows are relatively expensive to draw, so consider not setting <a>Part.isShadowed</a> to true. Gradient <a>Brush</a>es are slower to draw than solid colors. Complex <a>Shape</a> <a>Geometry</a>s are slower to draw than simpler ones, and they require more computation when computing intersections. </p> <p> Animation takes up resources; consider setting <a>AnimationManager.isEnabled</a> to false. </p> <h2 id="ConstructingAndSizingNodes">Constructing and Sizing Nodes</h2> <p> Keep your Nodes and Links as simple as you can make it. Limit how many GraphObjects that you use in your templates. Use simpler Panel types when feasible -- the "Table" Panel is the most featureful, but maybe you can just use a "Horizontal" or a "Vertical" or a "Spot" or an "Auto" Panel. A Panel should have two or more elements in them (although there can be exceptions). If you have no elements in a Panel, delete the panel. If you have only one element in a Panel, consider removing the panel and merging the element into the panel's containing panel. </p> <p> Do not include objects that are not visible. Limit how much data binding that you use, and avoid <a>Binding</a>s with no source property name or that are <a>Binding.ofObject</a>. </p> <p> If you have a <a>Picture</a> and you know its intended size beforehand, it's best to set its <a>GraphObject.desiredSize</a> (or <a>GraphObject.width</a> and <a>GraphObject.height</a>) so that it does not have to re-measured once the image loads. When nodes change size a <a>Layout</a> might need to be performed again, so having fixed size nodes helps reduce diagram layouts. In general, setting <a>GraphObject.desiredSize</a> on the elements of your nodes, especially <a>Picture</a>s, will speed up how quickly <b>GoJS</b> can measure and arrange the <a>Panel</a>s that form your Nodes or Links. </p> <h2 id="Shapes">Shapes</h2> <p> Shapes can decrease memory usage by sharing Geometries. Shapes that are given a set size with either <code>desiredSize</code> or <code>width</code> and <code>height</code>, and that are also using a <a>Shape.figure</a> of "Rectangle", "Circle", or "RoundedRectangle", will have their geometries potentially shared automatically. </p> <p> In other words, a single shape in a Node template defined like this: </p> <code> new go.Shape("RoundedRectangle", { width: 50, height: 50 }) </code> <p> Will create a single geometry that is shared among all copies of the Node. </p> <h2 id="Links">Links</h2> <p> The <a>Link.routing</a> property value <a>Link,AvoidsNodes</a> can be slow in very large graphs. Consider not using it in performance-minded large graphs, or setting it only after the initial layout is completed (use "InitialLayoutCompleted" <a href="events.html">Diagram event listener</a>), or ideally setting it at that time only on select Links. </p> <p> Using a <a>Link.curve</a> value of either <a>Link,JumpOver</a> or <a>Link,JumpGap</a> is a lot slower than not having to compute all the points where such links cross and drawing the small arc or drawing a gap. </p> <h2 id="Layouts">Layouts</h2> <p> <a>GridLayout</a> and <a>TreeLayout</a> and most other layouts are fast. </p> <p> <a>LayeredDigraphLayout</a> is slow -- it cannot handle thousands of nodes and links. The documentation of <a>LayeredDigraphLayout</a> suggests some properties that you can set in order to improve performance. Contact us if you continue to have any problems. </p> <h2 id="Overviews">Overviews</h2> <p> Overviews generally require drawing a Diagram a second time, so there may be some performance impact on large graphs. Consider setting <a>Overview.drawsGrid</a> to <code>false</code> or and <a>Overview.updateDelay</a> to a non-negative number. </p> <h2 id="Virtualization">Virtualization</h2> <p> For diagrams with many nodes and links that only display a fraction of them at a time, you could implement some form of virtualization to optimize your diagram. The <a href="../samples/virtualizedTree.html">Virtualized Tree sample</a> contains 123,456 total nodes, yet is fairly quick to load and render, because it only constructs nodes and links that intersect with the viewport. </p> <p> But this does complicate the implementation of the diagram, because you need to use a separate model from the <a>Diagram.model</a> and manage adding and removing Nodes and Links when the viewport changes. Furthermore layout is more complicated because it needs to work on <a>LayoutVertex</a>es and <a>LayoutEdge</a>s, not on <a>Node</a>s and <a>Link</a>s. </p> <p> Other virtualization samples are listed in the <a href="../samples/index.html#performance">samples index</a>. </p> <h2 id="OtherConsiderations">Other considerations</h2> <p> If you want to disassociate the Diagram from the HTML Div element, set <a>Diagram.div</a> to null. If you remove a part of the HTML DOM containing a Div with a Diagram, you will need to set <a>Diagram.div</a> to null in order for the page to garbage collect the memory. </p> <p> Depending on your app, it may be worthwhile to selectively toggle off some features (like shadows and animation) or to use simpler templates altogether, when slower environments are present, such as on mobile devices. </p> <p> You can use multiple templates depending on your zoom level. If you are zoomed out far enough (and therefore have a lot of nodes on the screen) you can switch to a simplified template so that rendering (when panning, dragging, etc) is faster. The process of switching templates has a performance cost, though, since Parts have to rebuild themselves. </p> <p> 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>. </p> </div> </div> <div class="bg-nwoods-primary"> <section class="max-w-screen-lg text-white container mx-auto py-2 px-12"> <p id="version" class="leading-none mb-2 my-4">GoJS</p> </section> </div><footer class="bg-nwoods-primary text-white"> <div class="container max-w-screen-lg mx-auto px-8"> <div class="w-full py-6"> <div class="max-w-screen-lg xl:max-w-screen-xl mx-auto px-4 sm:px-6 md:px-8"> <ul class="text-sm font-medium pb-6 grid grid-cols-2 sm:grid-cols-3 gap-y-10"> <li class="list-none row-span-2"> <h2 class="text-base font-semibold tracking-wide">GoJS</h2> <ul class="list-none space-y-4 md:space-y-1 px-0"> <li> <a href="../samples/index.html">Samples</a> </li> <li> <a href="../learn/index.html">Learn</a> </li> <li> <a href="../intro/index.html">Intro</a> </li> <li> <a href="../api/index.html">API</a> </li> <li> <a href="../changelog.html">Changelog</a> </li> <li> <a href="https://github.com/NorthwoodsSoftware/GoJS">GitHub</a> </li> </ul> </li> <li class="list-none row-span-2"> <h2 class="text-base font-semibold tracking-wide">Support</h2> <ul class="list-none space-y-4 md:space-y-1 px-0"> <li> <a href="https://www.nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a> </li> <li> <a href="https://forum.nwoods.com/c/gojs">Forum</a> </li> <li> <a href="https://www.nwoods.com/app/activate.aspx?sku=gojs">Activate</a> </li> <li> <a href="https://www.nwoods.com/sales/index.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a> </li> <li> <a href="https://www.youtube.com/channel/UC9We8EoX596-6XFjJDtZIDg">Videos</a> </li> </ul> </li> <li class="list-none row-span-2"> <h2 class="text-base font-semibold tracking-wide">Company</h2> <ul class="list-none space-y-4 md:space-y-1 px-0"> <li> <a target="_blank" href="https://www.nwoods.com">Northwoods</a> </li> <li> <a target="_blank" href="https://www.nwoods.com/about.html">About Us</a> </li> <li> <a target="_blank" href="https://www.nwoods.com/contact.html">Contact Us</a> </li> <li> <a target="_blank" href="https://www.nwoods.com/consulting.html">Consulting</a> </li> <li> <a target="_blank" href="https://twitter.com/northwoodsgo">Twitter</a> </li> </ul> </li> </ul> <p class="text-sm text-gray-100 md:mb-6"> Copyright 1998-2023 <a class="text-white" href="https://www.nwoods.com">Northwoods Software</a> </p> </div> </div> </footer> </body> <script async src="https://www.googletagmanager.com/gtag/js?id=G-S5QK8VSK84"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-S5QK8VSK84'); var getOutboundLink = function(url, label) { gtag('event', 'click', { 'event_category': 'outbound', 'event_label': label, 'transport_type': 'beacon' }); } // topnav var topButton = document.getElementById("topnavButton"); var topnavList = document.getElementById("topnavList"); topButton.addEventListener("click", function() { this.classList.toggle("active"); topnavList.classList.toggle("hidden"); document.getElementById("topnavOpen").classList.toggle("hidden"); document.getElementById("topnavClosed").classList.toggle("hidden"); }); </script> <script src="../assets/js/prism.js"></script> <script src="../release/go.js"></script> <script src="../assets/js/goDoc.js"></script> <script> document.addEventListener("DOMContentLoaded", function() { if (window.go) document.getElementById('version').textContent = "GoJS version " + go.version; if (window.goDoc) window.goDoc(); var d = window.diagrams; for (var i = 0; i < d.length; i++) { var dargs = d[i]; goCodeExecute(dargs[0], dargs[1], dargs[2], dargs[3], dargs[4]); } if (window.extra) window.extra(); }); </script> </html>