浏览器在什么情况下会创建多个相邻的文本节点？

Question

根据MDN，

新文档的每个文本块都有一个文本节点。随着时间的推移，随着文档内容的变化，可能会创建更多的 Text 节点

我在一个项目中遇到了一个罕见的错误，我认为这是由在单个元素中创建的多个文本节点触发的，而我只希望有一个，但我无法重现它。有什么方法可以触发这种浏览器行为，尤其是在 iOS Safari 中？

为了说明，我手动制作了一个带有两个文本节点的 div。我试图弄清楚浏览器何时会采用单个文本节点并将其分成两部分，如附件图片

Answer 1

WebCore 的HTMLConstructionSite.cpp 第 584–592 行似乎以某种方式记录了至少一个特别是 Safari/WebKit 意外破坏 textNodes 的案例，其中提到了 WebKit bug #55898。限制来自Text.h，它将defaultLengthLimit 设置为1 << 16 (65536)。

我不完全确定是哪一部分触发了这种情况，因为使用textContent 或appendChild(textNode) 将长文本添加到节点都创建了一个文本节点，即使是长文本也是如此。不过，我确实设法用innerHTML 复制了这种行为。

例子：

// empty <p> element
let p = document.getElementById("test");
p.innerHTML = "a".repeat(65536+100);
console.log(p.childNodes.length); // 2

显然 HTMLConstructionSite.cpp 与解析 HTML 有关，因此它适用于innerHTML 是有道理的，但我不知道 WebCore 中的其他一些地方是否也使用文本拆分 textNode 创建。我希望这至少有助于找出问题所在。