CODEWITHSUNDEEP
javascriptjqueryperformanceresponsive-designdom-manipulation
zitix
zitix

Reputation: 820

Performance of DOM manipulation for Responsive Web Design

I want to ask you, is it a good idea to use jQuery's append() method (and other similar methods like prepend(), remove()) for DOM manipulations to make the website responsive? How does it affect performance?

Example:

I have a menu (very big multilevel menu with hundreds of links) which is displayed at the top of the page on desktop. But it needs to be displayed in completely different place on mobile devices.

Solution 1:

Probably the simplest way to achieve this would be to include the menu more than once and just hide one menu with display: none; and show the other one with display: block; using CSS media queries:

<div id="menu-desktop-container">
    <div class="menu">...</div>
</div>

<!-- ...Here's some other HTML between both positions of the menus -->

<div id="menu-mobile-container">
    <div class="menu">...</div>
</div>

Here's the CSS for this: 

#menu-desktop-container { display: block; }
#menu-mobile-container { display: none; }

@media only screen and (max-width: 768px)
{
    #menu-desktop-container { display: none; }
    #menu-mobile-container { display: block; }
}

But it has many drawbacks. E.g. the menu is really big so including it twice will make the page almost two times bigger. This will affect performance and increase load time (especially on mobile devices with slower connection). Also, it's probably very bad for SEO, all links are duplicated.

Solution 2:

Other solution is to include the menu only once, and move it to proper container with jQuery's append() method. Here's the HTML markup (now it's much simpler as the menu is not duplicated):

<div id="menu-desktop-container">
    <div id="menu">...</div>
</div>

<!-- ...Here's some other HTML between both positions of the menus -->

<div id="menu-mobile-container"></div>

Then if the screen is narrow, I can move the menu to the mobile container using jQuery:

$("#menu-mobile-container").append( $("#menu") );

And if the screen is wide, I can move the menu back to the default desktop container:

$("#menu-desktop-container").append( $("#menu") );

I like the solution with append() method much more, but I have some concerns:

Questions

  1. How does it affect performance?
  2. Will it work correct on mobile devices?
  3. Will it work in all browsers?
  4. Will it work in old versions of Internet Explorer?
  5. Are there any other drawbacks which I should be aware of before I start using this method?

Upvotes: 2

Views: 991

Answers (1)

Matt Derrick
Matt Derrick

Reputation: 5724

These two use cases are very different in terms of performance so there is no measurement to compare the two.

Both have implications but the .append method has almost none in this case. Not many people would resize the browser over and over and unless you need to do the appending on unconventional breakpoints, no mobile device will probably trigger this on orientation change either.

The only thing you can really measure is the performance cost of various jQuery methods here.

Increasing the number of DOM nodes and using CSS to hide them will probably be the worst solution. Especially on mobile devices where you should keep DOM node depth to a minimum.

The only real performance issue you need to be aware of for both these implementations is reflows and repaints where DOM node depth and count matter. Although the duplicate menu you have is display: none; which stops it reflowing I still believe it can create perf issues with rendering. I also found this article interesting.

Upvotes: 1

Related Questions