有没有比setInterval更优的HTML div流式文本输出实现方案？

原代码的核心问题 #

• setInterval的精度缺陷：浏览器事件循环中，setInterval的回调执行时机不受严格控制，当主线程被渲染、其他JS任务占用时，回调会被推迟，导致输出速度忽快忽慢。
• 频繁DOM操作：每次循环都修改verbatimBio的内容，频繁触发DOM重排重绘，加重性能负担，引发卡顿。
• 逐字符处理放大了上述问题，小开销累积成性能瓶颈。

优化方案1：用requestAnimationFrame替代setInterval #

requestAnimationFrame是浏览器专为渲染优化设计的API，会在每次重绘前执行回调，时序更稳定，不会出现setInterval的累积延迟问题。结合时间戳控制输出间隔，保证字符输出速度一致。

$(window).on("load", function() {
    const bio = $('#template-bio')[0].innerHTML;
    const compiledBio = $('#compiled-bio');
    const verbatimBio = $('#verbatim-bio');
    let compiled = '';
    let verbatim = '';
    let compile = false;
    let index = 0;
    const charInterval = 50; // 每个字符的输出间隔(ms)
    let lastTime = 0;

    function render(currentTime) {
        if (!lastTime) lastTime = currentTime;
        // 计算时间差，达到间隔再输出字符
        if (currentTime - lastTime >= charInterval) {
            const symbol = bio[index++];
            if (index >= bio.length) {
                finishBioGeneration();
                return;
            } else if (compile && symbol == '>') {
                compiled += verbatim + symbol;
                compiledBio.html(compiled);
                verbatim = '';
                verbatimBio.text('');
                compile = false;
            } else {
                if (!compile && symbol == '<' && (bio[index] == '/' || bio[index] == 'b')) {
                    compile = true;
                }
                verbatim += symbol;
                verbatimBio.append(symbol);
            }
            lastTime = currentTime;
        }
        // 持续请求下一次渲染
        requestAnimationFrame(render);
    }

    requestAnimationFrame(render);
});

优化方案2：批量处理字符 + 减少DOM操作 #

频繁的逐字符DOM修改是关键性能瓶颈，一次处理多个字符，减少DOM操作次数，同时结合requestAnimationFrame控制节奏，能大幅提升流畅度。

$(window).on("load", function() {
    const bio = $('#template-bio')[0].innerHTML;
    const compiledBio = $('#compiled-bio');
    const verbatimBio = $('#verbatim-bio');
    let compiled = '';
    let verbatim = '';
    let compile = false;
    let index = 0;
    const charInterval = 50;
    const batchSize = 3; // 每次批量处理3个字符（可根据需求调整）
    let lastTime = 0;

    function render(currentTime) {
        if (!lastTime) lastTime = currentTime;
        if (currentTime - lastTime >= charInterval) {
            let processedCount = 0;
            // 批量处理字符，直到达到批量数或处理完所有内容
            while (processedCount < batchSize && index < bio.length) {
                const symbol = bio[index++];
                if (compile && symbol == '>') {
                    compiled += verbatim + symbol;
                    compiledBio.html(compiled);
                    verbatim = '';
                    verbatimBio.text('');
                    compile = false;
                } else {
                    if (!compile && symbol == '<' && (bio[index] == '/' || bio[index] == 'b')) {
                        compile = true;
                    }
                    verbatim += symbol;
                    processedCount++;
                }
            }
            // 批量更新DOM，减少操作次数
            if (processedCount > 0) {
                verbatimBio.append(verbatim.slice(-processedCount));
            }
            if (index >= bio.length) {
                finishBioGeneration();
                return;
            }
            lastTime = currentTime;
        }
        requestAnimationFrame(render);
    }

    requestAnimationFrame(render);
});

额外优化细节 #

• 缓存DOM元素引用：确保不在循环中重复查询DOM（原代码已实现，保持即可）。
• 用文本节点优化DOM更新：可以先构建Text对象，修改其data属性后一次性添加到DOM，比多次append更高效。
• 减少innerHTML修改频率：compiledBio的更新可以等到一段完整标签编译完成后再执行，避免频繁修改。

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