CODEWITHSUNDEEP
javascriptjqueryperformance
Lance Pollard
Lance Pollard

Reputation: 79488

Efficiently cloning html in jQuery: javascript template vs. append html, which has better performance?

What is the best/optimal way to change the html of a lightbox?

Say I have 20 table rows, and I want to pop them up in a fancybox. The choices are:

  1. Load the detailed view in an iframe as pure html (1 http request per popup)
  2. Load the details as JSON, and pass them into an inline javascript template to create the popup
  3. Load the details, and traverse the DOM of the popup and place the JSON values in the right spots (e.g. $("#popup .title").text(model.title);)
  4. Load the details as hidden inline server-generated HTML, and clone the html into the popup $("#popup").html($(".details", row).clone()).

The added HTML is what you'd find in a profile (links, description, logo, address, etc.), so it's not a ton but not a single line either.

Are there any standards here on what's the fastest in terms of javascript?

Upvotes: 2

Views: 638

Answers (1)

Alex
Alex

Reputation: 66042

Option #2. No competition efficiency-wise.

Upvotes: 1

Related Questions