O'Reilly

Using SCRIPT’s defer Attribute

By on  

One of the seldom used attributes within the HTML tag library is the defer attribute on SCRIPT elements.  As you can probably tell by the name of the attribute, defer instructs the contents of the script tag to not execute until the page has loaded.  Take a look!

Deferring Your Scripts

<script>
	//do stuff (runs first)
</script>
<script defer="defer">
	//do stuff, but defer it  (runs last)
</script>
<script>
	//do more stuff (runs second)
</script>

The deferred SCRIPT element's code will execute once the rest of the page's resources have loaded.  What does this mean?  Be sure that your document doesn't rely on any of the code within the script during page load.  In the example above, the middle block will execute once the page has loaded even though it appears before the last block.

More Details

Olivier Rochard has written an outstanding (and more detailed) post about using the defer attribute on the Mozilla Hacks blog.  His post details browser support (and quality of browser support...or lack thereof), advanced examples, and tips for using the defer attribute.

What I find funny about this tag is that it seems as though most of the script I see should be using this attribute.

Track.js Error Reporting

Recent Features

  • Create a Sheen Logo Effect with CSS

    I was inspired when I first saw Addy Osmani's original ShineTime blog post.  The hover sheen effect is simple but awesome.  When I started my blog redesign, I really wanted to use a sheen effect with my logo.  Using two HTML elements and...

  • Serving Fonts from CDN

    For maximum performance, we all know we must put our assets on CDN (another domain).  Along with those assets are custom web fonts.  Unfortunately custom web fonts via CDN (or any cross-domain font request) don't work in Firefox or Internet Explorer (correctly so, by spec) though...

Incredible Demos

  • Sexy Album Art with MooTools or jQuery

    The way that album information displays is usually insanely boring. Music is supposed to be fun and moving, right? Luckily MooTools and jQuery allow us to communicate that creativity on the web. The XHTML A few structure DIVs and the album information. The CSS The CSS...

  • jQuery topLink Plugin

    Last week I released a snippet of code for MooTools that allowed you to fade in and out a "to the top" link on any page. Here's how to implement that functionality using jQuery. The XHTML A simple link. The CSS A little CSS for position and style. The jQuery...

Discussion

  1. It’s seldom used because according to the blog post you linked to the only browser that executed the defer tag correctly is FireFox. IE and Safari have erratic behavior.

    Then one of the last comments on that post points to a bug report that says that HTML5 requires defer to be ignored https://bugzilla.mozilla.org/show_bug.cgi?id=518104

    This seems like a useless tag now.

  2. There is another good article on this over at http://dean.edwards.name/weblog/2005/09/busted/

    Beware of defer, it can be useful if used right, but it is easily used incorrectly

  3. I don’t think “defer” is reliable enough to be used effectively and to think that this means you’ll have better page load performance across the board. Also, the quirks in it can lead to some crazy-to-track-down race conditions.

    Dynamic script loaders are, IMHO, superior to “defer” (or even HTML5’s “async”), because if done right they provide a reliable and normalized behavior across all browsers.

    Some good examples would be LABjs, RequireJS and Dominoes.

    Also, many of the frameworks have script loaders that work well.

  4. kolin

    how would this fit in with ‘domready’ and ‘load’ ?
    i usually run scripts ‘domready’ or ‘load’ depending on whether the browser is trident. could defer replace both?

  5. Wow, I didn’t know you could actually use this outside of IE. Though the behavior seems so unpredictable with certain browsers, it kinda scares me to use it.

  6. Pranav Dave

    Using “defer” has resolved my issue of “Operation Abort” in IE6 and IE7.. Its good to use it always.. as it will not allow anything to write in DOM untill the page is completely loaded….

    • serhio

      not always. if your script does a document.write is harmfull

  7. Javascript Training

    The defer attribute is not well supported in all major browsers. So it should not be used.

  8. Javascript Training

    The defer attribute is not well supported in all major browsers. So it should not be used.

    http://wisentechnologies.com/it-courses/html-css-javascript-jquery-training.aspx

  9. I’m afraid the “defer” attribute is useless.

  10. serhio

    Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).

    So I don’t see the meaning of using it as in the example….

    http://www.w3schools.com/tags/att_script_defer.asp

  11. Wow, I didn’t know you could actually use this outside of IE

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Chris Coyierâs Favorite CodePen Demos II

    Hey everyone! Before we get started, I just want to say it’s damn hard to pick this few favorites on CodePen. Not because, as a co-founder of CodePen, I feel like a dad picking which kid he likes best (RUDE). But because there is just so...

  • GSAP + SVG For Power Users: Motion Along A Path

    Now that the GreenSock API is picking up steam, there are many tutorials and Getting Started guides out there to provide good introductions to the library, not to mention GreenSock’s own Forum and Documentation. This article isn’t intended for beginners, but rather a...

  • Copy a Directory from Command Line

    Copying a directory for the sake of backup is something I do often, especially when I'm trying to figure out why something isn't working when I use an external library.  I'll copy the directory structure as a backup, mess around with the original source until I find a solution,...

  • Hotjar &#8211; All-in-one Analytics and Feedback

    Website analytics are a massive business -- the more data you can collect with regard to your users' behaviors on your site, the more you can increase and maximise conversion...and increased conversion is always good.  Sometimes increase conversion means more money, improved user experience, viewer retention,...

  • Crafting a 3D React Carousel

    There is something in me that is amazed but beautiful 3D interfaces. And it doesn’t matter whether they’re functional like Gyroscope features menu, technology demonstrators like the amazing periodic table demo from famous or they’re artistic representation pushing the limits of...