René's URL Explorer Experiment

{"@context":"https://schema.org","@type":"DiscussionForumPosting","headline":"Document Megaplot memory performance best practices","articleBody":"Create a document which lists performance best practices such as minimizing memory allocations within callbacks.\r\n\r\n---\r\n\r\nIt's common in JavaScript, especially when using D3, to use object literals to pass values. Often in the browser, the performance implication of creating these short-lived objects is negligible compared to DOM operations such as reflow and paint.\r\n\r\nHowever, in Megaplot, memory operations are often among the more expensive, and so developers should take care to avoid creating short-lived objects, especially in callbacks which may be invoked many times.\r\n\r\nFor example, Megaplot allows colors to be specified by their individual component:\r\n\r\n```ts\r\nconst sprite = scene.createSprite();\r\nsprite.enter(s =\u003e {\r\n  s.FillColorR = 255;\r\n  s.FillColorG = 0;\r\n  s.FillColorB = 255;\r\n  s.FillColorOpacity = 1;\r\n});\r\n```\r\n\r\nThis is verbose, and so Megaplot offers destructuring assignment as well as individual component assignment.\r\n\r\nHere's the same example, but using destructuring with an object literal:\r\n\r\n```ts\r\nconst sprite = scene.createSprite();\r\nsprite.enter(s =\u003e {\r\n  s.FillColor = [255, 0, 255, 1];\r\n});\r\n```\r\n\r\nSince only a single Sprite is being created, and its `enter()` callback is invoked only once, this code has the effect of instatiating only one copy of the array `[255, 0, 255, 1]`.\r\n\r\nThe problem is when the same approach is taken with selections:\r\n\r\n```ts\r\nconst selection = scene.createSelection();\r\nselection.onInit(s =\u003e {\r\n  s.FillColor = [255, 0, 255, 1];\r\n});\r\nselection.bind(data);\r\n```\r\n\r\nWhen the selection is bound to the array of data, the selection's `onInit()` callback is called for each Sprite/datum pair. That means that a short-lived copy of the array `[255, 0, 255, 1]` is created and destroyed many times. These allocation and deallocation operations are significantly costlier than mere memory access at scale, and so it's better to declare constants outside of the callbacks like so:\r\n\r\n```ts\r\nconst INIT_FILL_COLOR = [255, 0, 255, 1];\r\nconst selection = scene.createSelection();\r\nselection.onInit(s =\u003e {\r\n  s.FillColor = INIT_FILL_COLOR;\r\n});\r\nselection.bind(data);\r\n```\r\n","author":{"url":"https://github.com/jimbojw","@type":"Person","name":"jimbojw"},"datePublished":"2022-10-05T10:44:13.000Z","interactionStatistic":{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":0},"url":"https://github.com/69/megaplot/issues/69"}