Unnecessary "forced synchronous layout" updates with large arrays in Expression Editor preview

Expression Editor preview is very slow in updating when there are many records/elements (objects?) in an array that need to be shown or previewed.

When there is a large array (Records, etc.) that is shown in Expression Editor preview, then for each element/subelement, there are multiple style changes that seem to occur, and for each one, the layout is being updated, over and over, in rapid succession. We are effectively looping and updating the DOM with style changes multiple times and writing each one out... rather than just reading the updated values and then finally writing them out.

Details of how to improve this: https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing?utm_source=devtools#avoid-forced-synchronous-layouts

To Reproduce

Steps to reproduce the behavior:

1. Start up Edge Dev Tools (or similar in another browser) to record a performance profile
2. Paste into an OpenRefine grid cell via edit any very large amount of HTML record text (see attached OpenRefine project "NPM-Packages" where Column 1 was/can be used)
3. Edit Column -> Add column based on... with just value , as long as there's a lot of HTML, or you can also do a value.parseHtml().select("ol > li").join("|||")
4. After the preview shows, Stop the profiling
5. Notice the performance profile results

Current Results

Load this Profile in Edge Dev Tools, if you want to see and compare to my own profile run: Trace-20240107T111209.zip

Expected Behavior

Iterating and reading all the style updates first, then a single final layout to render and update the DOM?

Screenshots

Versions

• Operating System: Windows 11
• Browser Version: Edge Version 121.0.2277.4 (Official build) stable app, beta channel (64-bit)
• JRE or JDK Version: OpenJDK 21
• OpenRefine: 3.7.7

Datasets

NPM-Packages.openrefine.tar.gz

Additional context