如何在JavaScript函数执行时实时将console.log输出到HTML div

问题原因 #

这个现象是浏览器的单线程事件循环机制导致的：JS执行和DOM渲染都在主线程上排队执行，你的同步for循环长时间占用主线程，虽然每次console.log都修改了DOM结构，但浏览器没有空闲时间执行UI重绘操作，只能等整个同步任务执行完才会一次性更新页面展示，所以你在Elements面板能看到DOM已经更新，但页面没渲染。

解决方案 #

方案1：修改业务逻辑，分批执行让出主线程 #

把同步循环改成异步分批执行，每执行一部分就给浏览器留出渲染时间，适合能修改原有业务代码的场景：

async function testfunction(){
    console.log('test function');
    for(let i=0; i<100000; i++){
        console.log(i);
        // 每打印100条让出一次主线程，可根据需要调整阈值，越小实时性越高
        if(i % 100 === 0) {
            await new Promise(resolve => requestAnimationFrame(resolve));
        }
    }
}

方案2：修改重写的console.log逻辑，批量异步更新DOM #

不需要改动原有业务代码，通过队列批量处理日志，减少DOM操作同时保证渲染时机：

var log = document.getElementById("logger")
const logQueue = [];
let isFlushing = false;

console.log = (function (method, log) {
    return function (text) {
        method(text);
        logQueue.push(text);
        if (!isFlushing) {
            isFlushing = true;
            // 在下一次浏览器渲染前处理日志队列
            requestAnimationFrame(() => {
                // 用文档片段批量插入，减少DOM重绘次数
                const fragment = document.createDocumentFragment();
                logQueue.forEach(text => {
                    const msg = document.createElement('div');
                    msg.textContent = text;
                    fragment.appendChild(msg);
                })
                log.appendChild(fragment);
                logQueue.length = 0;
                isFlushing = false;
            })
        }
    };
})(console.log.bind(console), log);

优化建议 #

如果你的业务逻辑本身是大量的同步计算任务，最根本的优化方案是把这部分计算放到Web Worker中执行，完全不占用主线程，页面渲染和日志输出都不会被阻塞。

内容的提问来源于stack exchange，提问作者NishiP