0

我使用 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方法。

有人有更好的建议吗？

4

2 回答 2

1

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

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

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

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

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

于 2019-07-16T16:04:25.423 回答
1

对我的问题的快速修复是对_renderToStaticMarkup_ 调用生成的 HTML 标记进行清理。在我的例子中，标记只是偶尔生成，但 Dom-Node 相等性检查非常频繁，所以我只使用纯字符串质量检查。

我尝试了多个库来实现这一点：

sanitize-html锁定有希望，但没有删除尾随/

html-minifier工作，但我在使用es6 导入时遇到问题

我最终使用了dompurify

于 2019-07-19T12:46:50.317 回答