Move Scripts To Bottom

Posted: March 11, 2010 in JavaScript

Last night’s jQuery Meetup was once again pretty awesome. Thanks again to BrightMix for hosting it and providing the Pizza and to Jonathan Sharp for making it all happen.

Andrew from Blue Cross Blue Shield presented on AJAX. He showed us his concept of building a global jQuery handler using a Namespace. This would allow other programmers in the organization and himself to skip all the repetitive programming. Some examples included a predefined spinner object and a global AJAX error handler. He’ll post his example to the group and I’m sure I’ll benefit from it in my projects.

One thing that caught my attention was with any larger JavaScript scripts you should consider moving the include to the bottom of the body tag. He explained this was so the page will load without hanging on scripts that must parse a lot of information. So I did a little research on this.

Remember Microsoft’s Blue Screen of Death? Thank God I haven’t seen this in a long time thanks to advancements in XP, Vista and 2007! Well, apparently there’s a similar “White Screen of Death”. This happens when the browser gets caught up in the JavaScript code for awhile before passing the content to the DOM. To avoid this move the script include to the bottom of the body tag. This will load the content into the DOM and then load things like the JavaScript and images.

The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. This is where CDN’s (content delivery networks) come into place nicely. While your website is loading your content and images using only two parallel paths, a third path can be opened to load libraries such as jQuery, not to mention it may already be cached in the browser if they visited another site using the same CDN.

I’ve always been taught to include CSS and JavaScript in the head tag, but I never really looked into the reasons behind it. Technically they can be included almost anywhere in the page. In the case of CSS includes, what you get is the Style Sheet is loaded and then the content when the CSS is included in the head tag. So when the content is being displayed, it progressively styles the content instead of going back after it’s all loaded and then style it causing some visual confusion.

Yahoo! Developer Network provides a great document titled “Best Practices for Speeding Up Your Web Site“. there are 35 best practices in 7 categories including conent, server, cookie, CSS, JavaScript, Images, and Mobile.

One more thing I picked up on; and I know I’ve seen it before; is how to break up large string blocks in JavaScript. Consider the following:

$('div').append('<ul><li>item1</li><li>item2</li><li>item3</li><li>item4</li><li>item5</li><li>item6</li></ul>');

Break it up into multiple lines for better code organization using the + sign:

$('div').append('<ul>'
+ '<li>item1</li>'
+ '<li>item2</li>'
+ '<li>item3</li>'
+ '<li>item4</li>'
+ '<li>item5</li>'
+ '<li>item6</li>'
+ '</ul>');
About these ads

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