jQuery DOM 操作 - 性能比较？答案

【问题标题】：jQuery DOM manipulations - performance comparation?jQuery DOM 操作 - 性能比较？
【发布时间】：2023-03-25 11:01:01
【问题描述】：

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

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

我可以：

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

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

【问题讨论】：

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

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

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

【讨论】：