jQuery DOM操作 - 性能比较?

时间:2011-09-18 09:53:12

标签: jquery performance dom browser

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

假设我有两个DOM元素(div,p,ol等),我希望用户只能看到第一个元素,然后才能看到第二个元素。

我可以:

  1. 使用replace()
  2. remove()第一个元素和add()第二个元素
  3. hide()第一个元素和show()第二个元素
  4. 以下两者之间的性能差异是什么:

    • 1 vs. 2
    • 2 vs. 3
    • 1 vs. 3

    如果元素属于不同类型,是否还有其他性能考虑因素?或者,如果元素是按钮或表单字段?

2 个答案:

答案 0 :(得分:6)

由于browser reflow,浏览器必须重新呈现部分或全部页面,因此在资源方面删除和添加元素是昂贵的。你想尽可能避免回流;它们很昂贵。

更换本质上是一个删除然后添加,所以上述情况适用。

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

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

总之,请使用.show().hide()以获得最佳效果。

答案 1 :(得分:1)

基本上如果你不想隐藏某些内容然后再显示它,最好隐藏()和show()。这不会改变dom的任何内容,只会改变它的显示方式。