Remove bottlenecks and optimize the web with Javascript

December 16th, 2008 Alexander Posted in Uncategorized | 2 Comments »

speed boat

There are times when you want to embed 3rd party elements into your web pages. If you have a high traffic site which has time critical output, you might come to realize that your 3rd party vendor doesn't have the same uptime as yourself, resulting in delayed GET statements that seem to bog down your site.

Here you are left with a couple of choices.

Ditching the supplied elements all together, usually a very unpopular decision.
Caching it - which might be a problem with licensing and time critical elements.
Use JavaScript to fetch those elements - as explained in this article.

The goal here is to give a usable page to your visitors as quickly as possible.

Fetching images

Imagine you have some graphs that you wish to display. You'd normally show these as

<img src="http://some.remote.host.com/image.jpg" alt="...." />

However, this can be troublesome. If this image is slow to fetch it might bog down your entire web page. So you want to fetch this image after everything else is loaded.

Set up a div element to hold your image.
Use JavaScript to manipulate the DOM to update the div element in #1.
The web browser will now automatically read the new DOM update and fetch the image.
Success.

<div id="some_image"></div>

<script type="text/javascript" src="/js/imagefetch.js"></script>

The content of the imagefetch.js script:

function getImage() {
    div = document.getElementById("some_image");

    img = document.createElement("img");
    img.setAttribute("src", "http://some.remote.host.com/image.jpg");
    img.setAttribute("alt", "alt text");

    div.appendChild(img);
}   

window.onload = getImage

The important aspect of this script is the window.onload event. With this you will execute the getImage function after the entire page is loaded.

Fetching fragments

There are other cases where entire fragments are to be inserted into your page. This has traditionally been solved by using iframes. However, using iframes leaves you at an disadvantage if you want to apply stylesheets or add javascript to the imported fragment. By inserting the fragment directly into your already existing DOM you can help leviate this problem. Using an AJAX library such as prototype greatly simplifies this.

<script type="text/javascript" src="/js/prototype.js"></script>

<script type="text/javascript" src="/js/getfragment.js"></script>

<div id="remote_fragment"></div>

And the content of getfragments.js:

new Ajax.Updater('remote_fragment', 'http://some.remote.host/fragment.html', {method: 'get'});

Since this is an AJAX call we don't need to call this in an window.onload event as it is already going on in the background. And with the Ajax.Updater helper this oneliner does an GET on the url and updates the remote_fragment with the output. If there is an error, nothing happens.

Conclusion

By using Javascript you can solve some of the bottlenecks on your web site when talking with 3rd party vendors. The techniques described here can also be used in other ways as well where you can get away with DOM manipulations. I.e. chain loading of javascripts for your ad management by updating the <head> element and adding new <script> tags through DOM after the window is loaded.

Share and Enjoy: