Getting to the Bottom of JavaScript Includes
Posted in Development
I get frustrated when an outside vendor insists that I include their JavaScript file all the way up in my pages. Usually they want it right in the <head>. I have a couple of issues with that.
I have no control over the responsiveness of your environment
Historically, when your browser encountered a JavaScript include, it would suspend rendering, parse and execute it. Thus every single include slows down rendering and affects the overall perception of responsiveness.
Yahoo’s Best Practices for Speeding Up Your Site, among many other sources, explains the predicament as follows:
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
If an outside vendor’s server has a hiccup, I get screwed. I see it, for example, in Firefox when it blocks some ad script. It just sits there forever waiting to render a script which will never come.
If you’re writing a yet another social networking, social commenting, etc, script, please make sure I can include it all the way on the bottom of my page.
Oh, and help you god if you mess up my DOM with document.write. Please play nice. You’re on my turf. My priorities of building a clean and responsive site are higher than yours.
Anup
on June 18, 2009
Agreed -- google's adsense as well as other such ad services are a major culprit in my experience. (Now the the main guy behind Yahoo's best practices you mention above is at Google, hopefully he can get the adsense team to provide an adsense script that is a better web page citizen, so to speak!)