Question

I have a dialog box that has settings associated with it. When the user clicks the “settings” button, a form is displayed so they can modify them.

What is more efficient:

• to have the settings div exist hidden on the page and display when needed

OR

• to create the settings div and populate it with data when needed?

In the first scenario you don’t need to create the DOM elements and populate them every time, but if there are many dialog boxes open at once (a common situation) then the amount of elements on the page is pretty large and many of them are not going to be used often. But in the second situation, elements are created and appended to the DOM which gets expensive.

Answer 1

I’d suggest you to “cache” your html on the page, but enforce browser to do not render it until necessary (until user request the data, or simply scroll to it). The main idea is to add your html (with data) to the page, but comment it out. For example,

<div id="cached-html">
  <!--
    <div>
    ...some custom html here
    </div>
  -->
</div>

Then once user requested the html, you can do the following:

var html = document.getElementById('cached-html'),
            inner = html.innerHTML;
html.innerHTML = inner.substring(4, inner.length - 4);

Pros. is that you don’t bother your browser with initial rendering (later you can simply user display:none to hide it again), so your page renders faster.

And another note – if your data (and as a consequence inner html) changes frequently, then it will be better to re-render it each time user request it, but if it is almost static, then hide/show should be more effective.