如何删除SpeechRecognition字幕容器顶部溢出文本以避免程序停止？

要解决文本累积过长导致的程序卡顿，核心思路是避免无限累加字符串导致DOM节点过载，转而将内容拆分为可管理的独立元素，动态删除顶部溢出的旧内容。以下是具体实现方案：

方案1：限制显示的段落数量 #

将每段最终识别的文本作为独立<p>元素存储，设定最大保留段落数，超过时自动移除最早的内容：

修改后的JavaScript代码 #

const badWords = ['banana', 'apple', 'pear', 'orange', 'grape'];

window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition;
// 用数组存储最终识别的段落，替代原有的字符串累加
const finalParagraphs = [];
let recognition = new window.SpeechRecognition();

recognition.interimResults = true;
recognition.maxAlternatives = 10;
recognition.continuous = true;

// 设置最多保留的段落数（可根据需求调整）
const MAX_DISPLAY_PARAGRAPHS = 10;

recognition.onresult = (event) => {
    let interimTranscript = '';
    for (let i = event.resultIndex, len = event.results.length; i < len; i++) {
        let transcript = event.results[i][0].transcript;
        const words = transcript.split(" ");
        const filteredWords = words.filter(word => !badWords.includes(word.toLowerCase()));
        const filteredTranscript = filteredWords.join(' ');
      
        if (event.results[i].isFinal) {
            // 新增最终识别的段落
            finalParagraphs.push(filteredTranscript);
            // 超过上限时删除最早的段落
            if (finalParagraphs.length > MAX_DISPLAY_PARAGRAPHS) {
                finalParagraphs.shift();
            }
        } else {
            interimTranscript = filteredTranscript;
        }
    }

    const container = document.getElementById('container');
    // 渲染所有保留的段落 + 临时识别文本
    let renderHtml = finalParagraphs.map(text => `<p>${text}</p>`).join('');
    if (interimTranscript) {
        renderHtml += `<p><i style="color:#FFFFFF;">${interimTranscript}</i></p>`;
    }
    container.innerHTML = renderHtml;
    // 自动滚动到底部
    container.scrollTop = container.scrollHeight;
}
recognition.start();

修改后的HTML代码 #

<body style="background-color: #000000;">
    <div style="height: 600px;
                font-size: 100px;
                color: white;
                overflow-y: hidden;
                padding: 10px;"
         id="container">
    </div>
</body>

方案2：根据容器高度动态删除内容 #

如果需要更灵活的适配（比如不同字体大小或容器高度），可以通过计算容器可视高度与内容总高度的差值，自动删除顶部溢出的内容：

在方案1的基础上，替换段落数量限制的逻辑，改为以下代码：

recognition.onresult = (event) => {
    // ...（保留原有的识别、过滤逻辑）

    const container = document.getElementById('container');
    let renderHtml = finalParagraphs.map(text => `<p>${text}</p>`).join('');
    if (interimTranscript) {
        renderHtml += `<p><i style="color:#FFFFFF;">${interimTranscript}</i></p>`;
    }
    container.innerHTML = renderHtml;

    // 动态删除顶部内容，直到总高度不超过容器可视高度
    while (container.scrollHeight > container.clientHeight) {
        if (container.firstChild) {
            container.removeChild(container.firstChild);
            finalParagraphs.shift();
        } else {
            break;
        }
    }
    container.scrollTop = container.scrollHeight;
}

方案优势 #

• 避免了原方案中字符串无限累加导致的DOM节点过载，内存占用更稳定；
• 独立段落元素便于精准管理，删除旧内容时直接移除对应节点，性能损耗低；
• 两种方案可根据场景选择：固定段落数适合需求明确的场景，动态高度适配适合多变的显示环境。

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