jQuery的DOM操作 - 性能的比较？ [英] jQuery DOM manipulations - performance comparation?

问题描述

我学习DOM操作使用jQuery并希望了解浏览器性能的最佳做法。

I am learning DOM manipulation with jQuery and want to understand browser performance best practices.

说我有两个DOM元素（DIV，P，醇等），我希望用户只能看到第一个元素，然后只看到第二个元素。

Say I have two DOM elements (div, p, ol, etc) and I want a user to only see the first element and then only see the second element.

我可以：

1. 使用替换（）


2. 删除（）的第一个元素，并添加（）的第二个元素


3. 隐藏（）的第一个元素和show（）的第二个元素

什么是之间的性能差异：

What is the performance differences between:

• 1对2


• 2与3


• 1对3

是否有，如果元素是不同类型的附加性能的考虑？或者，如果该元素是按钮或表单字段？

Are there additional performance considerations if the elements are of different types? Or if the elements are buttons or form fields?

推荐答案

删除和添加元素的DOM是昂贵的，因为的浏览​​器回流，在浏览器必须重新呈现部分或全部页面。你想避免回流时，您可以;他们是昂贵的。

Removing and adding elements to the DOM is expensive in terms of resources because of browser reflow, where the browser must re-render part or all of the page. You want to avoid reflows whenever you can; they are costly.

更换本质上是一种去除那么除此之外，因此上述适用。

Replacing is essentially a removal then an addition, so the above applies.

显示和隐藏是最好的，因为它仅增加样式的元素

Showing and hiding is best, because it is only adding styles to the elements.

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

The type of elements you're applying these methods too should not lead to a change in the above.

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

In conclusion, use .show() and .hide() for best performance.

这篇关于jQuery的DOM操作 - 性能的比较？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！