JavaScript DOM 渲染 OnLoadStart 和 OnLoad 函数同时运行

Question

问题

当单击导入按钮时，下面的 JavaScript onloadstart 函数将运行并显示警报/日志，但是在该警报上单击确定后，也会显示完成加载警报。 5 秒后文件实际完成并填充文本框。

为什么开始和结束的警报/日志都在开始时运行？我希望在实际填充文本框时运行完成的警报，这仅在文件真正导入后才会发生。

编辑

也许导入已完成，但文本框填充需要 5 秒钟。

现在的问题是如何在渲染完成后触发完成事件。

我对页面刷新感到好奇，我在页面顶部的网站上添加了下面的 Fiddle。单击导入后，“tick”值会停止刷新约 5 秒钟，然后恢复。一旦恢复，文本框也会被填充。似乎整个页面刷新在文本框 DOM 渲染期间停止。

https://jsfiddle.net/mosdxrhk/

JSON 文件大小：6 mb

导入 JSON 文件后 textarea 的字符数

document.getElementById('importTextArea').value.length

8,014,573

我还注意到，在我对该文本区域执行一些操作并将其输出到另一个文本区域后，新文件字符数为 3700 万。这最终会导致整个 Chrome 网页崩溃。

HTML

<textarea class="form-control" spellcheck="false" id="importTextArea"></textarea>

JavaScript

    document.getElementById('import').onclick = function() {
        var files = document.getElementById('selectFiles').files;
        console.log(files);
        if (files.length <= 0) {
            return false;
        }
        
        var fr = new FileReader();
        fr.onloadstart = function(e) {
            console.log("start loading");
            alert("start loading");
        }
        fr.onload = function(e) { 
            console.log(e);
            var result = JSON.parse(e.target.result);
            var formatted = JSON.stringify(result, null, 2);
            document.getElementById('importTextArea').value = formatted; // populated text box
            console.log("finished loading");            
            alert("finished loading");
        }
        fr.readAsText(files.item(0));
    };

Answer 1

是的，这是异步渲染。

使用下面的示例，没有任何FileReader，我设法在 Chromium 中重现了效果。修改 DOM 并不会立即重新渲染页面：它只会安排近期的渲染周期。而 Firefox 则不这样：当 textarea DOM 节点被修改时，浏览器执行一个完整的渲染周期，然后才显示警报。

function populate() {
    var rep = parseFloat(document.getElementById('rep').value);
    document.getElementById('a').value = 'a'.repeat(rep);
    alert('hi');
}

<textarea id="a"></textarea><br>
repetitions: <input id="rep" type="number" value="5e6"><br>
<button onclick="populate()">populate</button>