Plugin thrashes browser

[stefan-sherwood]

Software	Version
ArcWelder plugin	1.0.0+u.bb71e8f
OctoPrint	1.10.3
Chrome browser	131.0.6778.108 (Official Build) (64-bit)

I noticed that with the ArcWelder plugin enabled the OctoPrint web interface is sluggish, even with nothing printing. Looking at the Chrome Task Manager I can see the OctoPrint tab is constantly consuming 35-65% of the CPU. When I disable the ArcWelder plugin, CPU consumption goes down to 3-6% (still unacceptable IMO but that's a story for a different day).

When I bring up the Chrome Developer Console, I see thousands of messages being outputted to the console every second.

Adding Buttons for file with hash: 8118775711384c8dd62e7baffe76c37b7090116f

The offending line is at arc_welder.js, line 652. However, commenting out the line reveals another issue that appears once every few seconds.

[Violation] Forced reflow while executing JavaScript took 319ms

I can see that addProcessButtonToFileManager() is being called a couple of times per second and on each iteration, it is enumerating all of the files (631 for me) and searching and modifying the DOM for each. As a result the browser is attempting to reflow the user interface hundreds of times a second.

General jQuery development principles state that you should batch your element changes and submit them wholesale to the DOM. Additionally, the code is doing a top-down jQuery search for each file element, which is inefficient and unnecessary. Most importantly, you should avoid unnecessary frequent DOM changes. Given that the other buttons in the file list are not being refreshed it would be possible to not make any changes if nothing has changed.

I suspect that people with a small number of files and fast machines will likely not see any issue except for the excessive console logging.