大量节点下CSS Custom Highlight API致DOM移除性能骤降的解决办法

问题背景 #

当使用CSS Custom Highlight API给大量DOM节点绑定Range后，执行innerHTML或removeChild()等DOM移除操作时，性能会下降50%以上。经测试，核心原因并非Range对象无法手动释放（detach()仅为兼容保留，无实际作用），而是Range被添加到Highlight实例后，浏览器在移除DOM时需要逐个处理这些关联的高亮引用，导致耗时激增。

缓解性能下降的方法 #

• 提前清空Highlight实例：在执行DOM移除操作前，先清空高亮集合或从全局高亮注册表中移除目标高亮，避免浏览器处理DOM节点与Range的关联清理：

  document.querySelector("button").onclick = () => {
    console.log("beginning delete...");
    console.time("perftest");
    // 清空当前高亮的所有Range
    highlight.clear();
    // 或者直接从全局注册表移除该高亮
    CSS.highlights.delete("test");
    document.body.innerHTML = "";
    console.timeEnd("perftest");
  };
  

  这一步能直接切断Range与DOM节点的关联，大幅降低DOM移除的耗时。
• 批量DOM操作时临时移除高亮：如果需要频繁操作大量DOM，可在操作前将高亮从CSS.highlights中移除，操作完成后再重新添加（若需保留高亮效果）。
• 减少Range数量：尝试合并可覆盖连续文本节点的Range，避免给每个节点绑定独立Range，从根源上降低浏览器需要处理的关联引用数量。

是否需要向Chromium提交问题报告？ #

建议提交。当前的性能损耗属于潜在的优化点，虽然符合规范行为，但浏览器在处理大量关联Range的DOM移除时，应该具备更高效的批量清理机制。提交时附上你的测试代码和性能对比数据，能帮助Chromium团队定位优化方向。

测试代码示例 #

HTML #

<button>Click me to delete</button>

CSS #

::highlight(test) {
  background-color: #FEE6B1;
  color: black;
}

JavaScript #

// 创建测试节点
let html = "";
for (let i = 0; i < 50000; i++) {
  html += "<p>Test paragraph</p>";
}

document.body.innerHTML += html;

// 初始化自定义高亮
let highlight = new Highlight();
CSS.highlights.set("test", highlight);

// 给每个段落绑定Range
for (const paragraph of document.querySelectorAll("p")) {
  let range = new Range();
  range.setStart(paragraph.childNodes[0], 0);
  range.setEnd(paragraph.childNodes[0], 2);
  highlight.add(range);
}

// 优化后的删除逻辑
document.querySelector("button").onclick = () => {
  console.log("beginning delete...");
  console.time("perftest");
  highlight.clear();
  CSS.highlights.delete("test");
  document.body.innerHTML = "";
  console.timeEnd("perftest");
};

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