Home/ Questions/Q 6249189
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T13:11:30+00:00

Is there a difference between … this <html> … <div id=myDiv> </div>’; … </html>

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.
    • 0