Memory leak when executing toTextarea after entering characters #6411

RyuDoizaki · 2020-09-13T00:08:48Z

#6409
I am very grateful for the immediate response to the issue I posted last time.

#6410
However, the problem of memory leak when I entered the characters I posted the last time still occurs.
If you run toTextarea after typing characters in CodeMirror, that instance of CodeMirror will remain in memory. It will not be released by garbage collection.

I tried to reproduce this memory leak automatically with just a script, but it didn't work.
Instead, I made it possible to reproduce this by manually executing the script while holding down the key.

<html>
    <head>
        <!-- CodeMirror master branch Sep 12 15:00:00 2020 -->
        <link rel="stylesheet" href="./CodeMirror/lib/codemirror.css">
        <script src="./CodeMirror/lib/codemirror.js"></script>
    </head>
    <body>
        <textarea id="targetTextarea" cols="30" rows="10"></textarea>
        <div>
            <br>
            <div id="loopMessage"></div>
            <button id="add">
                add and remove 100
            </button>
            <div>keydown</div>
            <div id="keydownMessage"></div>
        </div>
        <script>
            let codemirror = undefined;
            let addEl = undefined;
            let loopMessageEl = undefined;
            let keydownMessageEl = undefined;

            function sleepMills(mill){
                return new Promise(resolve => setTimeout(resolve, mill));
            }

            window.onload = function(){
                addEl = document.querySelector('#add');
                loopMessageEl = document.querySelector('#loopMessage');
                addEl.addEventListener('click', async () => {
                    loopMessageEl.textContent = 'looping';
                    for (let i = 0; i < 100; i++) {
                        codemirror = CodeMirror.fromTextArea(document.querySelector('#targetTextarea'), { autofocus: true });
                        // Set the time that you can enter one or more characters by holding down the key
                        await sleepMills(35);
                        codemirror.toTextArea();
                        codemirror = null;
                    }
                    loopMessageEl.textContent = '';
                });

                keydownMessageEl = document.querySelector('#keydownMessage');
                window.addEventListener('keydown', (e) => {
                    const key = `[${e.key}]`
                    if(!keydownMessageEl.textContent.includes(key)) {
                        keydownMessageEl.textContent += key;
                    }
                })
                window.addEventListener('keyup', (e) => {
                    const key = `[${e.key}]`
                    if(keydownMessageEl.textContent.includes(key)) {
                        keydownMessageEl.textContent = keydownMessageEl.textContent.replace(key, '');
                    }
                })
            }
        </script>
    </body>
</html>

In this video, I held down A on my keyboard and clicked add and remove 100.
And, The number of garbage instances of CodeMirror has increased by 100 each.
I have the exact same problem with Chrome on both Windows 10 and Mac Catalina

The text was updated successfully, but these errors were encountered:

marijnh · 2020-09-14T09:30:57Z

I can confirm the leak, but debugging it with Chrome devtools shows entirely inexplicable elements in the retainer chain for the CodeMirror objects. Specifically, it claims the textarea element is being retained by a ShadowRoot (CodeMirror does not use shadow roots), which, in turn, is being retained by a sequence of InternalNode objects, which could be anything and doesn't appear to be documented anywhere.

Interestingly, I can produce a similar effect if I just add a number of raw textareas to the document, focus them, wait a bit to let the held key type something into them, and remove them again. When profiling memory after that, even though the textarea elements have all been removed from the document, I'm seeing a bunch of them retained by ShadowRoot objects. So I think this is more of a Chrome issue than a CodeMirror issue.

RyuDoizaki · 2020-09-14T11:42:10Z

Thank you for looking into this right away.
Sorry, I didn't realize it was a problem with Chrome.
Thank you so much!

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Memory leak when executing toTextarea after entering characters #6411

Memory leak when executing toTextarea after entering characters #6411

RyuDoizaki commented Sep 13, 2020

marijnh commented Sep 14, 2020 •

edited

Loading

RyuDoizaki commented Sep 14, 2020

Memory leak when executing toTextarea after entering characters #6411

Memory leak when executing toTextarea after entering characters #6411

Comments

RyuDoizaki commented Sep 13, 2020

marijnh commented Sep 14, 2020 • edited Loading

RyuDoizaki commented Sep 14, 2020

marijnh commented Sep 14, 2020 •

edited

Loading