The spark for my learning this stuff was Paul Irish’s excellent screencast, “HTML5, CSS3, and DOM Performance”, recorded a little over a year ago from this post. I also read a ton of articles and blog posts on the subject and, of course, wrote some code to test things out. I share all this stuff in this three-part screencast tutorial.
I do the following in this screencast:
- create a document fragment off-DOM with
- create a bunch of web page elements off-DOM with
- arrange them the way I want to arrange them with
innerHTMLand the jQuery
- load them into a document fragment with
- load the document fragment onto the web page with, yet again,
- duplicate the content that was just loaded on the page with
- load the duplicate content onto a web page with, one more time,
And, of course, the tutorial’s final code on GitHub is here.