在实时应用中逐段拼接 HTML 字符串时，直接使用 innerHTML += 会导致浏览器强制解析并修正不完整标签，破坏预期结构；本文提供稳定、可控的替代方案，确保片段式渲染保持语义完整性。
在实时应用中逐段拼接 html 字符串时，直接使用 `innerhtml +=` 会导致浏览器强制解析并修正不完整标签，破坏预期结构；本文提供稳定、可控的替代方案，确保片段式渲染保持语义完整性。
浏览器的 HTML 解析器严格遵循规范：当向 innerHTML 写入非完整、非平衡的 HTML 片段（如
The paragraph starts）时，它会主动“修复”DOM——自动闭合未结束的标签、补全缺失结构，甚至将后续纯文本插入到当前上下文之外。这正是你观察到
The paragraph starts
and ends. 的根本原因：浏览器从未允许标签长期处于“打开”状态。
因此，绝不能依赖 element.innerHTML += fragment 进行分段 HTML 渲染。正确的做法是：维护一个完整的 HTML 字符串副本，在每次收到新片段时更新该副本，然后一次性赋值给 innerHTML。这样，浏览器始终面对一个逻辑上可解析（即使暂未闭合）但结构受控的字符串，避免中间态触发自动修复。
立即学习“前端免费学习笔记（深入）”；
以下是一个生产就绪的实现示例（不依赖 jQuery，原生 JavaScript）：
// ✅ 推荐：用内存变量累积 HTML，统一赋值
let htmlBuffer = '';
function appendHtmlFragment(fragment) {
htmlBuffer += fragment;
document.getElementById('content').innerHTML = htmlBuffer;
}
// 模拟服务端分块推送（如 SSE 或 WebSocket）
document.addEventListener('DOMContentLoaded', () => {
const contentEl = document.getElementById('content');
// 第一块：开头标签 + 部分内容
appendHtmlFragment('<p>The paragraph starts');
// 延迟后追加中间内容
setTimeout(() => {
appendHtmlFragment(' and ends.');
}, 3000);
// 再延迟后补全闭合标签
setTimeout(() => {
appendHtmlFragment('</p>');
}, 6000);
});⚠️ 关键注意事项：
- 不要混用 innerHTML += 和缓冲更新：一旦开始使用缓冲策略，就必须全程坚持；混合写法会再次触发浏览器修复逻辑。
- 注意 XSS 风险：若片段来自不可信来源（如用户输入、第三方 API），务必对 fragment 执行 HTML 转义（例如使用 DOMPurify.sanitize() 或手动转义 , &, "），再拼接到 htmlBuffer。
- 性能考量：对于高频更新（如每秒数十次），可引入防抖或批量合并机制，避免过度重排重绘；但绝大多数实时文档场景（如日志流、协作编辑）频率较低，无需额外优化。
- 替代方案参考：若需更高控制力（如精确 DOM 节点管理），可考虑 DocumentFragment + insertAdjacentHTML() 组合，但需自行维护节点状态，复杂度显著上升，通常缓冲字符串已足够健壮。
总结：浏览器的 HTML 自动修复机制是安全特性，而非缺陷；与其对抗它，不如顺应其规则——把不完整的 HTML 视为“待提交草稿”，仅在内存中编辑，最终以完整（或至少语法自洽）的字符串一次性提交给 DOM。这是实现实时、可靠、可预测 HTML 渲染的基石实践。
