Hi, if I have say 20 lines of text and I have a script that,
- records the style attributes of the text (font size, color…)
- 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.
- 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).