jQuery DOM操作 - 性能比较？

Question

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

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

我可以:

1. 使用replace()
2. remove()第一个元素和add()第二个元素
3. hide()第一个元素,show()第二个元素

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

• 1对2
• 2比3
• 1对3

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

Answer 1

由于浏览器重排,浏览器必须重新渲染部分或全部页面,因此在资源方面删除和添加元素对资源来说是昂贵的.你想尽可能避免回流; 它们很贵.

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

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

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

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