jQuery DOM 操作 - 性能比较？

Posted 2023-02-21

【中文标题】jQuery DOM 操作 - 性能比较？

【英文标题】：jQuery DOM manipulations - performance comparation?

【发布时间】：2011-11-19 14:48:36

【问题描述】：

我正在学习使用 jQuery 进行 DOM 操作，并想了解浏览器性能最佳实践。

假设我有两个 DOM 元素（div、p、ol 等），我希望用户只看到第一个元素，然后只看到第二个元素。

我可以：

使用替换() remove() 第一个元素并 add() 第二个元素 hide() 第一个元素和 show() 第二个元素

两者之间的性能差异是什么：

1 对 2 2 对 3 1 对 3

如果元素属于不同类型，是否还有其他性能注意事项？或者如果元素是按钮或表单域？

【问题讨论】：

我想说这取决于您生成标记的方式和位置（即您需要有多灵活），例如，当您使用 replace/ 时，您必须在 JS 端生成内容删除/添加。如果您真的对性能感兴趣，您可以在这里轻松地测试您的案例：jsperf.com

【参考方案1】：

由于browser reflow，浏览器必须重新渲染部分或全部页面，因此向 DOM 删除和添加元素在资源方面是昂贵的。您希望尽可能避免回流；它们很昂贵。

替换本质上是删除然后添加，因此上述适用。

显示和隐藏是最好的，因为它只是为元素添加样式。

您应用这些方法的元素类型也不应该导致上述变化。

总之，使用.show() 和.hide() 以获得最佳性能。

【讨论】：

感谢关于回流的说明。

谢谢@Alex！对于对更多信息感兴趣的读者（除了您的链接），我发现了另一篇值得分享的描述性文章from the Opera team

【参考方案2】：

基本上，如果您不想隐藏某些内容然后稍后再次显示，则最好始终使用 hide() 和 show()。这不会改变 dom 的任何内容，只会改变它的显示方式。