etherpad-lite: Performance degradation on 1.8.0 and newer versions

Describe the bug Performance degradation introduced on version 1.8.0 and replicable on newer versions as well

To Reproduce Steps to reproduce the behavior:

1. Create a long pad (e.g. over 4.000 lines)
2. Press ENTER on the beginning of the pad to create a new line
3. Long time processing the change

Expected behavior The creation of the new line pressing ENTER should be much faster. As a baseline we can use the version 1.7.5.

Screenshots

1. The old way to deal with iframe height

This is the code that I suppose it was changing the height of the “ace2_inner” iframe on versions older than 1.8.0 https://github.com/ether/etherpad-lite/blob/1.7.5/src/static/js/ace2_inner.js#L4817

2. The new approach

As the screenshot shows there is not height style defined on the iframe. Its size is defined by the size of #sidediv children. This is possible because it uses flexbox.

3. Video of 1.7.5 and 1.8.4 edition with the same text

https://youtu.be/LpthRFAH3GM please, try to hear when I type

Desktop (please complete the following information):

• Windows, MacOS, Ubuntu
• Google Chrome Version 84.0.4147.135

Smartphone (please complete the following information):

I didn’t test on any smartphone

Additional context

The main problem is due to the cost of reflow (check next session). That means that with more complex CSS rules the delay will increase. If we set the #sidediv to display:none that delay does not happen anymore but we cause a problem with the size of the “ace2_inner” as it’s written here https://github.com/ether/etherpad-lite/blob/develop/src/static/css/iframe_editor.css#L125 On both versions I’m running without any plugin.

Chrome dev-tools report for operation shown on the video

1.7.5

1.8.4

the rendering time increased a lot look how long takes the “Layout” operation

Some interesting articles about the Theme

1. https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing

2. https://gist.github.com/paulirish/5d52fb081b3570c81e3a

3. https://gist.github.com/paulirish/5d52fb081b3570c81e3a#more-on-forced-layout