forEachCodeMirror is heavy when window resize on plenty of CodeMirror instance

[futurist]

When there're plenty of CodeMirror instance in a document then window resize event will trigger below line:

https://github.com/codemirror/CodeMirror/blob/87702cf2eb53cabd25e4f994354ea9fc9e2c1d97/src/edit/global_events.js#L29

That is a heavy operation like the demo below (with 150+ CodeMirror cells):

The chrome performance panel shows this:

Here you can compare with just 5 CodeMirror cells:

Recommended to use some way to distribute the resize into frames like using below:

https://github.com/GoogleChromeLabs/idlize

[marijnh]

Attached patch should help a lot with this (by batching the updates to avoid all those relayouts)

[futurist]

After tested with the patch, the performance is improved, but still have noticeable lag.

Can it be better for below?

• for old browsers, keep it as is

• for modern browsers, use modern way

1. Before resize, check cell visibility, e.g. using
   https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

2. Only resize visible cells, keep others untouched

3. When cell scroll into viewport, trigger a resize event to itself

Just a note for this issue, priority is very low....

[marijnh]

This is more or less how CodeMirror 6 will work, but for 5 it's unlikely that visibility tracking will be added.