Fast Loading JavaScript

What is the best way to get JS into the page?

It’s been well know that scripts block. In older browser external scripts block next objects from being downloaded and in all browsers both external and inline scripts block DOM parsing and page rendering. Since 2008, per the recommendations of Yahoo! and Steve Souders’ book, the advice has been to combine external scripts and move the script to the bottom of the HTML in order to get optimal page performance. Then came the dynamic loading of scripts: appending a script to the DOM without blocking the UI thread. Script loaders like LABjs and Yepnope emerged, enabling web developers to load multiple script tags in a non-blocking way, while preserving execution order and even with the ability to couple external scripts with inline JS code. And the story continues. There is the defer attribute, the async attribute and async=false is coming soon.

With so many ways to get JS code into the page, how do you, the web developer, decide which technique(s) to use to get optimal performance for your pages? As a starting point, you need a solid understanding of the various techniques and how they behave in the popular browsers under different conditions.

• The various JavaScript loading techniques
• Different test cases (example pages)
• Browser differences (desktop only)
• Good to know weird stuff (jquery + jquery UI + defer in IE<=9 == total failure)

I will present results of extensive, recent testing.

• Solid understanding of various techniques
• Browser differences
• What to use in which use case (!)