Guess what? Server-side render time is probably not the bottleneck of your page performance… In most cases, the front-end is the most significant contributor to page load time. Things like img tags and css images are one of the most frequent contributors to load because these assets are loaded by the browser, even if they’re not visible to the user.

But you have all this content and images on your page, you say? What are you to do?

So one technique is to use lazy loading of images and even entire portions of the DOM as users scroll down the page. By lazy loading, you free up resources such as bandwidth, available http connections, and client-cpu to render the content within the browser viewport quickly. Then, worry about additional content as the user scrolls down the page.

Maybe there’s a little delay to load the images, but better to render them later than keep your users waiting on initial load, right? Who knows? Maybe many of your users don’t even scroll down on every page load? In those cases, they will never see the content anyway… why waste resources?

Perhaps you’ll also cut your server bandwidth and free up more apache threads or reduce requests to your static content server by using lazy loading and save yourself some Dinero$.

How To Implement Lazy Loading with jQuery

So I wrote this little jQuery plugin that I hope you’ll find useful to help in your endeavor to get lazy. The premise is to use a placeholder tag with an Html Comment inside to hide content from the rendering engine. If the browser can’t see your img tags or html elements with css images, it obviously wont render them.

The trick then is to tell the browser which tags to render while the page is loading.

Here’s a quick example:

<pre class=”i-am-lazy” ><!–
<img src=”some.png” />
–></pre>

<pre class=”i-am-lazy” ><!–
<div>Any, html css img background, whatever. <img src=”some.png” /> </div>
–></pre>

<script type=”text/javascript” src=”jquery.lazyloader.js” ></script>
<script type=”text/javascript” >
$(document).ready( function()
{
    $(’pre.i-am-lazy’).lazyLoad();
});
</script>

The Lazy Loader replaces the placeholder ‘pre’ tags with the text inside the HTML Comment, so the pre tags disappear as the hidden content is rendered into the DOM. This way, you don’t get a bunch of crufty markup cluttering up the DOM once the content is rendered.

If the content appears withing the browser viewport on initial load, the content in the pre tags is automatically rendered right away. Otherwise the html content within the pre tags is rendered as the user scrolls down the page.

I like to use pre tags for placeholders when I’m lazy loading because they render with 0 dimension when there’s only an html comment inside. You can use any tag you like though with your html comment inside. You can use div, li, ul, etc… not just pre tags. Be sure though not to include any white space between the tags:

<div class=”i-am-lazy”><!– stuff –></div>

not:

<div class=”i-am-lazy”>                   <!– stuff –>               </div>

A real Lazy Loader example – Facebook Friend List:

Where to get it? Downloads and Links:

jQuery Plugin Project Page

jquery.lazyloader.zip

Check out the code:

<form id="twitter_search" >
   <label for="twitter_search" >Search Twitter Feed:</label>
   <input type="text" name="q" value="GUICenter" />
   <input type="submit" name="submit" value="Submit" />
 </form>
 <div id="twitter_results_tmpl" style="display:none" >
   <h4>Tweets from {name}</h4>
     <ul>
       <li style="display:none" >{text} <br/ >Created At: {created_at}</li>
    </ul>
 </div>

Twitter = {

			init: function()
			{
				$('#twitter_search').submit(Twitter.search);
			},

			search: function()
			{
				$.ajax({
					'url': 'http://twitter.com/statuses/user_timeline/'+$(this.q).val()+'.json',
					'data': { count: 5 },
					'success': Twitter.onSearchResult,
					'dataType': 'jsonp'
				});

				return false;

			},

			onSearchResult: function(res)
			{
				$('#twitter_results_tmpl')
					.render(res[0]['user'],{clone:true})
					.removeAttr('id')
					.find('.twitter_tmpl')
					.render( res, {clone:true} )
				  .show().end().end().show();
			}

		};

		$(document).ready( Twitter.init );

Try it out…

Cool, eh?

Here is the excerpt:

The jQuery templates plugin enables you to use jQuery and HTML as a template engine. Why would you want to use JavaScript as a template engine you might ask? One of the primary reasons is to perform easy token replacements inside the DOM when you receive data back from an AJAX call. Typically (especially when using frameworks like jQuery) you won’t want to put your html inside a JS file, but rather use the code to manipulate the html already inside the DOM. The jQuery templates function allows you to apply template token replacements to any section of markup in the DOM, and even clone templates when you have an array of new values.

On plugins.jquery.com: http://plugins.jquery.com/project/Templates

Full Documentation Here

Okay, better google for outerHtml: yes… no… grrrrr… there is an outerHtml property, but only for IE. So lets see if we can roll our own cross-browser solution using jquery:

jQuery.fn.extend( {

  outerHtml: function( replacement )
  {
    // We just want to replace the entire node and contents with
    // some new html value
    if (replacement)
    {
      return this.each(function (){ $(this).replaceWith(replacement); });
    }

    /*
     * Now, clone the node, we want a duplicate so we don't remove
     * the contents from the DOM. Then append the cloned node to
     * an anonymous div.
     * Once you have the anonymous div, you can get the innerHtml,
     * which includes the original tag.
     */
    var tmp_node = $("<div></div>").append( $(this).clone() );
    var markup = tmp_node.html();

    // Don't forget to clean up or we will leak memory.
    tmp_node.remove();
    return markup;
  }
});

So that basically gets us an outerHtml() function! The method also lets you do outerHtml replacements, which is basically just a wrapper around replaceWith(). Pretty fun!

So now, how do we use it?

<div class="outer" >Fun Stuff</div>

// get the entire html for the <div class="outer" > tag
var x = $('.outer').outerHtml();

// replace all div tags with <div class="outer" >Fun Stuff</div>
$('div').outerHtml(x);

Which is fastest?

$(’.box_text’).html(’test1′);
$(’span.box_text’).html(’test2′);
$(’#box_text’).html(’test3′);

Which is fastest? Have a look for yourself on this test page, http://www.ivorycity.com/tests/jquery/selectors/test0.php.

If you’re using FF3, they should all be about the same, but if you’re using IE6,7, or FF2, $(’#box_text’) is up to 10x faster than $(’.box_text’)!

Why is this?

In order to answer these questions, we need to know a little about how jQuery finds DOM nodes.

Internally, jQuery uses document.getElementById() to find elements based on id. Browsers index id’s internally, so the lookup is instantaneous.  Meanwhile,  using $(’.someclass’) in IE causes jQuery to iterate over every element in the DOM to find one with a particular class – that’s crazy slow!

By prefixing ’span’ to the query, we get $(’span.box_text’) – this is a little better because internally, jQuery calls document.getElementsByTagName and iterates the results. Since spans are only a sub-set of all DOM nodes, the query is a lot faster. So if you’re performing lots of ‘naked’ class selectors, you’re going to consume a lot of user cpu.

In Firefox 3 however,  it’s no longer the case that $(’.someclass’) causes an iteration over the DOM; document.getElementsByClassName() was added in FF3 to index element class names inside the browser memory space, which is much, much faster. That’s why we don’t see the same performance hit as in IE.

Now, it may not always be appropriate to access elements by id. If you’re trying to find many instances, say 100+, with a particular class name, it’s actually faster to use $(’.someclass’) than to loop through a set of id’s.

The moral of the story…

1) Use id selectors to reference a ‘needle in a haystack’

2) Use class selectors prudently, and only when referencing large numbers of DOM nodes

3) You can also prevent iteration over the entire dom by doing something like $(’#myid .myclass’) which only searches sub-nodes of #myid.