Lazy Loading Content (v5)

Revision 5 of this benchmark created on

Description

Testing four different ways to lazy load content. The basic idea is to allow the inclusion of mark-up in a web page but keep it hidden from the browser parser until some action (e.g. onclick) requires it to be parsed. Takes a hint from Google's JavaScript lazy load library. Ultimately, it's a silly idea.

All are fast. I'm totally confused why the comment code would be so much faster though.

The four methods to store the mark-up are:

  1. as a string in JS
  2. a comment within a div
  3. script tag with type text/html within the div the mark-up will be placed in
  4. script tag with type text/html outside the div the mark-up will be placed in

Preparation HTML

<div id="comment-panel"><!-- <img src='rodent.jpg' id='img' /> --></div>
<script type='text/html' id='script-panel-clean-img'><img src='rodent.jpg' id='img' /></script>

<div id="target_1"></div><div id="target_2"></div><div id="target_3"></div><div id="target_4"></div>

<script>

var source_1 = "<img src='rodent.jpg' id='img' />";
var source_2 = document.getElementById("comment-panel");
var source_3 = document.getElementById("script-panel-clean-img");

var target_1 = document.getElementById("target_1");
var target_2 = document.getElementById("target_2");
var target_3 = document.getElementById("target_3");
var target_4 = document.getElementById("target_4");

</script>

Test runner

Ready to run.

Testing in
TestOps/sec
Doc Frag
target_1.innerHTML = source_1;
ready
Comment
target_2.innerHTML = source_2.childNodes[0].textContent;
ready
Script w/ Code Outside Div
target_3.innerHTML = source_3.text;
ready
Comment Using NodeType
target_4.innerHTML = source_2.childNodes[0].nodeValue;
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.