Speed up page load with asynchronous javascript


JavaScript an important part of or web applications. Normally or web is not usable until js is full loaded. Almost all js framework implements an event to notice when the js is ready (dojo.addOnLoad(); $(function() {});) and the page is usable. The page is usable when js is loaded. Sometimes if you are working with dojo you need all js and maybe is better to create an splash screen until all is loaded. But sometimes your app don’t need all js to be usable. I give you a example: I’ve been working in a project with jQuery. I load jQuery library from google cdn

<script type="text/javascript" src="http://www.google.com/jsapi?key=mygoogleApiKey"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
</script>

jQuery is mandatory. The site doesn’t work without this library.

google.setOnLoadCallback(function() {
    $(function() {
        // application code ...
    });
});

I want to put rss feeds of some blogs on the left bar of the application and I need to do it with js. I’m going to use google’s feed api to do it so:

<script type="text/javascript" src="http://www.google.com/jsapi?key=myGoogleApiKey"></script>
<script type="text/javascript">
    google.load("jquery", "1.3.2");
    google.load("feeds", "1"); // <-------------
</script>

And I call to the js function to populates RSS feed into google’s onready callback (setOnLoadCallback)

google.setOnLoadCallback(function() {
initFeeds() // <------------- $(function() { // application code ... }); }); [/sourcecode] This version of code works but it has a problem. All application will not be usable until initFeeds ends. The fedds on the left bar are cool but the user don't need them to use the application. It's just a decoration so: why we force user to wait until feeds are loaded? The solution is quite simple. Put a timer to free the main js file and populate feed asynchronously [sourcecode language='js'] google.setOnLoadCallback(function() { setTimeout(initFeeds, 1000); <------------- $(function() { // application code ... }); }); [/sourcecode]

Advertisements

About Gonzalo Ayuso

Web Architect. PHP, Python, Node, Angular, ionic, PostgreSQL, Linux, ... Always learning.

Posted on April 18, 2009, in Technology, Web Development. Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: