Deferring scripts for faster rendering

October 23rd, 2006. Tagged: JavaScript

So it turns out one can defer scripts, meaning give the browser a hint that a script will not mess up with the page right now, so it won't affect the rendering and can be delayed for later. This could give you increased performance during the initial page load and rendering, since you're giving the browser a clearance to temporarily skip this script and continue with the other magic it's doing.

The syntax is simple, just add defer attribute to the script tag and (to be XHTML compliant, give it a) "defer" value. Like this:

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

Believe it or not, the defer attribute, which originated from MS, is now a part of the standard XHTML, as well as HTML4.01 strict and is not supported by FireFox.

I put up a little demo, if you want to see it in action. In my demo, if you check it with FF (all defers ignored) you'll get:
ff.png
With the defers, in IE, you get:
ie.png
Have in mind that there's not guarantee it will always happen like this. If, for example, an external non-deferred script is taking a while to download, a deferred one might get processed it it's ready. So you cannot rely on this, you can merely instruct the browser: "Hey, dude, this is a low priority, do the rendering first, the best you can..."

Tell your friends about this post on Facebook and Twitter

Sorry, comments disabled and hidden due to excessive spam.

Meanwhile, hit me up on twitter @stoyanstefanov