Fast Loading JavaScript

Web Performance
Location: Hall 1 A Level:
Average rating: ***..
(3.62, 16 ratings)

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.

My presentation will cover:

  • 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.

Takeaways:

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

Aaron Peters

TurboBytes

Web performance optimization consultant. Founder of www.turbobytes.com. Snowboarder. Dad. Born in the USA, lives in The Netherlands.

Comments on this page are now closed.

Comments

Picture of Aaron Peters
Aaron Peters
14/11/2011 16:17 CET

FYI, you can view my presentation on SlideShare at www.slideshare.net/startren...

Picture of Aaron Peters
Aaron Peters
10/11/2011 11:20 CET

@Felix Hassert. Txs for the compliment. I hope the tree is useful for you. Do let me know via Twitter (@aaronpeters) if think it needs to be improved in any way.

Picture of Felix Hassert
Felix Hassert
9/11/2011 21:33 CET

Thanks for the excellent js loader decision tree!

Bulletin

Bulletin

  • ip-label
  • Compuware Corporation
  • dynaTrace
  • Keynote Systems
  • New Relic
  • Citrix Systems
  • Google
  • Apica
  • AppDynamics
  • CDNetworks
  • Cotendo
  • Dyn Inc.
  • ImmobilienScout24
  • Spil Games
  • Dyn Inc.

For information on exhibition and sponsorship opportunities at the conference, contact Gloria Lombardo at glombardo@oreilly.com

View a list of Velocity Europe contacts