Draw/redraw performance tips?

Hi, if I have say 20 lines of text and I have a script that,

  1. records the style attributes of the text (font size, color…)
  2. creates a new Text component for each line of text and positions them, applying the text attributes as it goes. All functions are async and awaited.
  3. I group this initial set of rendered Text objects.

I find that it’s taking ~ 250-500ms to draw the list. It gets slower with more items. I have a panel that lets you modify some properties like the Text items’ position (spacing), alignment… Each time a setting is changed I redraw the list. I have tried two different re-render strategies:

  • Strategy A: Delete all items in the group then redraw with the same logic as the first time they were drawn, using the updated properties from the UI panel.
  • Strategy B: When drawing the original set of Text items, retain references to their guids. When re-rendering, reposition the existing text objects and update their properties using guids to obtain references to the correct objects.

Both of these strategies had comparable performance and #1 is what I have stuck with because the code is less complex.

So, if I have a button that increases font size and repositions text and I click it three times quickly, it feels very laggy as the renderer takes longer to draw the updated Text objects than it takes to click the button.

Can you think of any tips to improve performance? I’m unclear how relevant using async/await is with the drawing APIs with respect to performance in XD (I do understand async/await well, in general from a JS standpoint).

Thank you!

1 Like

@abcd_ca Note that the scenegraph manipulations in XD are not asynchronous, unlike other unnamed UXP-based point products.

So any awaiting you’re doing may be wasting time, though it should be minimal.

1 Like

While I agree it shouldn’t make too much of a difference, I’m unsure how this works in practice (this may depend on the JS engine?).

When chaining many awaits together in, say, a loop (which is where “it gets slower with more items” would make sense), wouldn’t it have to work on a large callstack for every additional await that has to get executed in sequence.

If you had, say, 500 await statements in sequence in a loop, it is my understanding that this gets intrepreted as basically a callstack that’s 500+ levels deep (with callbacks for each subsequent statement), which could lower the performance…

Just some thoughts, though. I don’t really have the time to test this right now…

What’s likely slowing things down (if it is) is letting XD get in a full UI cycle on every await. That could get expensive.

1 Like