CODEWITHSUNDEEP
javascriptjqueryhtmlperformance
Peter
Peter

Reputation: 11835

Store HTML code in variable (faster for the browser?)

Is there a difference between ...

this

<html>
   ...
    <div id="myDiv">  </div>';
   ...
</html>
var manyHtmlCode = '  ... many Html Code ... ';
// onclick -> write it in to the DIV -> $('myDiv').append(manyHtmlCode);

and this

<html>
   ...
    <div id="myDiv" style="display:none;"> ... many Html Code ... </div>';
   ...
</html>
// onclick -> show content $('myDiv').show();

It is obvious to me that the second solution is faster in javascript, but what about with the browser speed? Is the browser faster (for example, draging a div) with a smaller HTML code in the body Tag?

If so, it would be better to store not needed HTML code in a JS var. My Problem is that i have a page with many many draggable divs. Imho is the dragspeed better when the html code is smaller.

Upvotes: 2

Views: 1288

Answers (5)

Chris
Chris

Reputation: 10358

The second solution is faster for two reasons:

  1. The HTML in this approach is 'static' HTML; it exists in the response to the browser, and doesn't need to be parsed or interpreted by JavaScript to get added to the page.
  2. When parsing and rendering the HTML, the browser will notice the display: none and not bother rendering that element nor anything inside it. This speeds up the initial render of the page, because it doesn't actually render a lot of your HTML.

Upvotes: 4

Michael Lorton
Michael Lorton

Reputation: 44416

Is there a difference between ...

It depends on the meaning of "is".

On a particular version of a particular browser, one or the other will run faster. You can, if you wish, benchmark them on five or 10 different browser versions and find out which usually wins.

But so what? The user won't be able to tell the difference; the user's computer typically isn't doing anything else, so there's no point in conserving the CPU cycles.

My advice to all programmers -- but especially to programmers writing for browsers -- is to ignore time and space efficiency until you see a problem and focus on

  • Correctness -- the code performs as designed, even in the face of unexpected inputs, changes in the underlying platform, and similar challenges;
  • Maintainability -- the code is written so it can be altered as requirements change; and
  • Usability -- the code presents an interface (either the UI in the case of end-user code or API in the case of library code) that allows a user who lacks a complete appreciation of the code to still use it correctly.

Efficiency, bah.

Upvotes: 0

Shalom Sam
Shalom Sam

Reputation: 1559

Depends on what exactly you wanna achieve. Yes the second one would obviously be faster as the HTML is already present in the Document, which the jQuery unhides. While in the 1st method the jquery is writing the content in real time.

Again there may be different ways to achieve what you are trying, like you could write divs u have edited into a file using ajax etc etc .. and remove it from the current document. Thus reducing the amount of html in the document.

I'm just giving you an idea here.. the thing is u haven't clearly explained what you are trying to achieve to give you the most suitable solution

Upvotes: 0

Praveen Prasad
Praveen Prasad

Reputation: 32117

If you have too many DOM items then i would suggest go with first one. Suppose you want to traverse DOM and look for an element , if you have less elements then traversing will take less time.

My suggestion is to benchmark your code. And use the one that suits best to you.

You can use below tool

http://jsperf.com/

Upvotes: 0

genesis
genesis

Reputation: 50982

I would use second one, because it is faster to execute. (1 call of jQuery instead of 2)

Upvotes: 2

Related Questions