JS Loading strategies

YUI 3 Loading Strategies

Caridy Patino / @caridyFrontend EngineerYahoo! SearchYUI Evangelist

Evolution

developer.yahoo.com/performance/rules.html

Put Scripts at Bottom

Minimize HTTP Requests

Use a Content Delivery Network (CDN)

JS Loader Frameworks changed the game

YUI LABjs HeadJS ControlJS

RequireJS Load.jsYepNope.js $script.js

LazyLoad curl.js DeferJS jquery.defer.js jQl

DominateJS JSLBootstrap StealJS

bdLoad NBL.jshttps://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE#gid=0

dd, substitute and slider

tabview, oop, event, node, widget, etc

yui seed

loader

Static Combo Strategy

Data-driven initialization routine

Using app-rollout files

Using app-rollout files

Rollout vs Loader

Rollout Composition

Library

Plugins

CustomInit.js

A big app-rollout takes more time to download and can potentially freeze the browser

Simple rollout

Interactivity Core & Lazy Components

Defining the interactivity core is

crucial

Core and Lazy Components

core rollout

lazy components

Parallel Download Strategy

Get app-rollout early without compromising domready and onload

“Ideal Solution”

Parallel Download: Challenges

• Produce a VERY tiny non-blocking bootstrap

• Avoid blocking onload with app-rollout

• Split the app-rollout into multiple and balanced files

Event Binder Strategy

Time to Interactivity

Time to Interactivity

Users should be able to interact with the page at any time

Catch and hold some events until the handler become available

But, doing so without increasing the complexity of the application

yuilibrary.com/gallery/show/event-binder

Event Binder: Features

- Event-driven Module Loading

- Early Event Binding

Event-driven Module Loading

Regular YUI 3 Module

Event-driven Module Loading

Early Event Binding

Early Event Binding

iFrame Strategy

Plug & Play Widgets

A Plug & Play Widget is an independent piece of software that can run on any page

Widgets: Challenges

- Inject the widget without degrading the host page

- Keep the widget JavaScript in a sandbox

- Keep the widget CSS in a sandbox

A YUI instance can be tailored to work off a different document

yuilibrary.com/gallery/show/parent-window

Injecting a widget using an iframe

widget-app-rollout.js

Preload Strategy

http://www.linkedin.com/jsearch

Preload: Features

- Store static JS assets in cache without executing them

- Store static CSS assets in cache without including them

Stay ahead of the users without increasing the complexity of the app

yuilibrary.com/gallery/show/preload

… some more thoughts

- Optimize only if it doesn’t add complexity to your app

- Granularity is good for optimization - Rollouts can help you to control the loading process

- Focus on the bottle necks that affect the majority of your users

- Work on the user perception

Thanks!

Caridy Patinohttp://github.com/caridyhttp://twitter.com/caridy