Is inserting and removing element to and from DOM expensive?

Question

Currently I am creating a tabular-like web UI. The tabs are placed at the top and they share same common area to display their relevant data.

I have three questions:

1. Is inserting and removing DOM element an expensive operation?

2. Can jQuery append() and remove() methods be used for inserting and removing DOM element respectively?

3. If they are expensive, what are the efficient alternatives such as show() and hide() or is there anything else?

Answer 1

"I was curious...is inserting and removing dom element an expensive operation?"

Most browsers will do it at no charge. Seriously though, any operation that causes the browser to repaint the page can be "expensive" if you do too much of it. Showing/hiding causes repaints too, but (without having tested it) I would expect it to be a bit faster than appending/removing.

The tab interface you describe would presumably involve adding/removing quite a few elements at a time though, which would be more expensive than simply showing/hiding a container div for each tab.

"are jquery append and remove methods inserting and removing dom element operation respectively?"

Yes. (If the method names don't make this obvious the documentation does.)

"if they are expensive, what are the efficient alternatives...show and hide, is there anything else?"

Using .show() and .hide() is my preference because it will likely make your JS much less complicated than if you have to append and remove. And as I already mentioned, for a tab type interface where you'd need to make groups of elements appear/disappear at once you can just show/hide a div that contains all the elements for the current tab. The child elements will show/hide with their parent.

Also with jQuery .show() and .hide() or other animation methods like .fadeIn() and .fadeOut() you can add some nice transitions between your tabs.

In a general sense, code the effect you want first , and worry about making it more efficient later if you find it doesn't perform well.

Answer 2

Note that jQuery.remove does more than remove an element from the DOM. From the documentation, "In addition to the elements themselves, all bound events and jQuery data associated with the elements are removed." So this will be more expensive than a simple DOM manipulation.

Answer 3

Repaints

A repaint occurs when changes are made to elements that affect visibility but not the layout. For example, opacity , background-color , visibility , and outline . Repaints are expensive because the browser must check the visibility of all other nodes in the DOM — one or more may have become visible beneath the changed element.

Reflows

Reflows have a bigger impact. This refers to the re-calculation of positions and dimensions of all elements , which leads to re-rendering part or all of the document. Changing a single element can affect all children, ancestors, and siblings.

Both are browser-blocking; neither the user or your application can perform other tasks during the time that a repaint or reflow occurring. In extreme cases, a CSS effect could lead to slower JavaScript execution. This is one of the reasons you encounter issues such as jerky scrolling and unresponsive interfaces.

It's useful to understand when reflows are triggered:

Adding, removing or changing visible DOM elements The first is obvious; using JavaScript to change the DOM will cause a reflow.

Adding, removing or changing CSS styles

Similarly, directly applying CSS styles or changing the class may alter the layout. Changing the width of an element can affect all elements on the same DOM branch and those surrounding it.

CSS3 animations and transitions

Every frame of the animation will cause a reflow.

Using offsetWidth and offsetHeight

Bizarrely, reading an element's offsetWidth and offsetHeight property can trigger an initial reflow so the figures can be calculated.

User actions

Finally, the user can trigger reflows by activating a :hover effect, entering text in a field, resizing the window, changing the font dimensions, switching stylesheets or fonts.

The reflow processing flow hit will vary. Some browsers are better than others at certain operations. Some elements are more expensive to render than others.

Source: https://www.sitepoint.com/10-ways-minimize-reflows-improve-performance/