时间戳

首页 > 解决方案 > 如果两个 DOMString 在 JavaScript 中代表相同的 DOM 节点，最有效的方法就是比较它们

javascript - 如果两个 DOMString 在 JavaScript 中代表相同的 DOM 节点，最有效的方法就是比较它们

问题描述

我使用 ReactJs 函数renderToStaticMarkup来创建 HTML 标记。标记位于 App 中的另一个位置，作为其他 DOM 节点的innerHTML属性。由于我想防止图像和iframe重新渲染，我想进行比较，如果当前的innerHTML与它应该设置的不同。

if (!domNode.innerHTML !== newMarkup);
    domNode.innerHTML = newMarkup;
}

出于某种原因，Reacts renderToStaticMarkup为图像创建 HTML 标记为：

<img src="https://placebeard.it/200x150" alt="" class="content-media-image-linked"/>

但 DOM innerHTML的值为

<img src="https://placebeard.it/200x150" alt="" class="content-media-image-linked">

所以基本上区别在于尾随/（但这不需要是经验法则）

我想知道确定这两个 DOMString 是否代表同一个 DOM 节点的最有效/最快的方法是什么。

1.字符串比较

替换/删除所有出现的/>

2. 解析/转换为 DOMNodes

这是更安全的方法，但也更昂贵。我将不得不使用类似的东西document.createRange().createContextualFragment（参见这篇文章），而不是使用该isEqualNode方法。

有人有更好的建议吗？

标签： javascripthtmldomdom-node

解决方案

我想你知道，标签末尾的/in/>在 HTML 中没有任何意义（它在 XHTML 和 JSX 中如此），所以我的诱惑是

  1. 更改/>为>并比较；如果它们匹配，它们是相同的。

  2. 如果它们不匹配，请解析并使用isEqualNode

在我认为大多数情况下，第一个让你快速获胜。第二种以更慢但更健壮的方式工作，允许属性以不同的顺序排列而不引入差异（除非它产生差异）等。

当替换/>with>时，当然要确保只在正确的位置这样做，这可能会或可能不会很棘手，具体取决于您正在处理的字符串（例如，它们包含嵌套的 HTML 等）。（如果 HTML 不是像您的示例那样的单个元素，“您不能只使用简单的正则表达式”中的“棘手” img。）

推荐阅读