Reporter slows down due to creating an unreasonable number of DOM nodes

[agg23]

Current behavior

Cypress slows down as more entries are added to the Reporter's Command Log. This results in exponential growth of total test time whenever the Command Log is visible (though luckily it's a small exponent). Further investigation showed the Command component renders 27+ DOM nodes (there are also React Portals, so even more than 27). Google Lighthouse recommends that the total count of DOM elements should remain below 1,500. Larger tests can easily reach 15,000+ DOM nodes, which is the likely source of the slowdown.

Desired behavior

Cypress does not slow down based on the number of rendered Commands. Additionally, the DOM footprint of the application should be minimized.

[jennifer-shehane]

Yes, we've seen this reported numerous times from users. @chrisbreiding spent A LOT of time trying to improve the rendering if you want to discuss with him any options he's already explored.

Some performance issues involving many DOM nodes with reproducible examples:

• Tests that iterate over many DOM elements with .each() run slower in Electron during cypress run in 3.8.0 #5987
• Performance issues of the Runner when using Cypress commands on many DOM elements at once #6967
• Tests slow down over time when performing several XHR requests calls in single test #6783
• [cy.session] cy.then() timed out after waiting 30000ms #19906

[BlueWinds]

Just doing some cleanup as we begin looking into this internally; closing in favor of #4164, which contains links to a bunch of different examples.

Definitely a real issue, and closing doesn't mean we're not paying attention; just consolidating a bit as we start looking into this more seriously.