HTML Defer Attribute06/18/2013
Payson mentioned a ‘defer’ attribute on script tags that got me curious.
As we all probably know by now, and I typically ask in interviews (*cough Bri, *cough), script tags are blocking requests and must finish downloading before the rest of the page will be downloaded. Typically scripts don’t need to fire off until the DOM is ready anyways, so the best practice is to put them right before the closing body tag. This leads to the browser downloading all visual content first, and thus a perceived faster loading time since you start to see content on the screen faster.
There is a ‘defer’ attribute that you can put on script tags, which is intented to sort of FIFO (First in First Out) load the scripts after page is loaded. Unfortunately IE8, IE9, Opera, and some versions of webkit treat this tag erratically, so it’s not useable as is right now, if you intend to keep your scripts in the HEAD tag. But if you’re keeping your script before </body>, then the defer property isn’t going to do much anyways since the DOM is just about finished loading.
Now, this brings me to a new HTML5 property called ‘async’, which is similar to ‘defer’, except that it doesn’t follow the FIFO rule, meaning your scripts will get loaded in the order that they finish downloading. So if you were to load jQuery and a script that relies on jQuery asynchronously, bad things could sporadically happen, depending on if jQuery downloaded first, which it probably would not due to file size and latency. However, if you’re loading jQuery from a CDN (and you should be to leverage caching), you could get away with a single async tag, though again it probably wouldn’t do much good since it’s at the bottom of your HTML, anyways.
With that said, keep these properties in mind in the event that you have to insert some external script tags that you can’t concatenate with your platform. For example, if you needed to load Google Analytics, Google ads, and Bing Webmaster tools, those would be prime candidates for the async property since they don’t have dependencies and can load whenever.
Here’s some good info if you’re curious.