Post on 26-Jun-2015
description
The Once and Future Script Loader
Kyle Simpson@getify
http://getify.me
where…we were
once upon a time, in a browser far, far away…
<script src="…"></script>
where…we were
<script src="…"></script><script src="…"></script><script src="…"></script><script src="…"></script><script src="…"></script><script src="…"></script>
…
where…we were
Why not just combine all your files?
• different pages, different scripts
• cacheability
• parallel loading
• on-demand/lazy-loading
where…we were
<script> tags block. bad. evil.
where…we were
What do <script> tags block, and why?
• other <script> tags
• other content (loading & rendering)
• DOM-ready
where…we were
IE7-, FF3-, Opera
where…we were
IE8, FF3.5/3.6, Chr 14-
where…we were
IE9+, FF4+
Script Loaders
where…we were
document.write()
where…we were
document.write()MustDie!
where…we were
<script> tags also suck because...
• browser-specific scripts
• conditional loading/URLs
• event handling
where…we were
The very first script loader?
document.write("<script src='...'></sc"+"ript>");
where…we were
who-tf?
...and still many ad providers, 3rd party widgets, etc.
where…we were
Surely we can do better!?
where…we were
XHR?
where…we were
Framework-specific loaders...
...just stink
where…we were
Making progress... but not there yet
where…we were
What's hard about script loading?
where…we were
A general script loader should:
• load any script, at any time, from anywhere... except document.write()
• have performance at or better than <script> in modern browsers
• equivalent behavior in all browsers
where…we were
A general script loader should also:
• avoid: hacks, UA sniffing
• feature-detect
• have as few exception-cases as possible
where…we were
General script loader feature creep:
• trying to handle document.write()
• loading CSS
• "dependency management"
• delaying DOM-ready
where…we were
• load many scripts in parallel (race to finish loading ASAP)
• ensure execution order (not ASAP)
Script loading requires:
where…we were
<script> tags (even dynamically created) give you no control over
loading or execution
where…we were
The spec says that dynamic scripts should load and run ASAP
(not ordered)
umm...
where…we were
All current browser versions except Opera (but soon!) follow the spec
uh oh
where…we were
Some older browsers execute in order, some don't
doh!
Some older browsers load in parallel, some don't
where…we were
Not for the faint of heart
where…we were
A young leader?
LABjs
where…we were
LABjs: performance script loader
where…we were
where…we wereLABjs: performance
script loader
What was wrong with LABjs?
• ugly source code
• lots of hacks
• exception cases
• brittle (not future proof)
where…we were
Anyone can write a loader!
where…we are now
(and many devs have)
where…we are now
https://spreadsheets0.google.com/spreadsheet/ccc?key=tDdcrv9wNQRCNCRCflWxhYQ
Loaders are competing more on APIs than on
features or performance
where…we are now
They're also copying each other (good and bad)
where…we are now
But, can their functionality be
trusted?
where…we are now
Testing is much harder than most realize
where…we are now
"Browser support" is vague
where…we are now
Exception cases often ignored or overlooked
where…we are now
Browser Sniffs, Hacks
where…we are now
What should a loader do?
where…we are now
Real Preloading
http://wiki.whatwg.org/wiki/Script_Execution_Control
where…we are now
IE4+ ftw?
where…we are now
async=false
http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order
Ordered Async
FF4+, Chr 12+, IE10p2+, Webkit/Safari, Opera (soon!)
where…we are now
1. try real preloading
2. try ordered async
3. try same-domain XHR
4. fall back on "cache preloading"
How?
where…we are now
LABjs 2.0
• readable source code
• "future proof " feature detects
• fewer exception cases
• better performance
http://labjs.com/releasenotes.php
where…we are now
What happens next?
where…we're going next
Competition is good, only if community is educated
where…we're going next
http://PickALoader.com
where…we're going next
(coming soon)
Browsers do not yet give us what we really need
where…we're going next
Co-opetition is much healthier for the
community
where…we're going next
Only script loaders which help build the future
will survive
where…we're going next
W3C, WHATWG
http://wiki.whatwg.org/wiki/Category:Proposals
where…we're going next
We'll accomplish more if we work together
where…we're going next
Future, The Script Loader
where…we're going next
Preloading
(deferred execution)
where…we're going next
Modules
(CommonJS, AMD, etc)
where…we're going next
Native Modules
(ES-Harmony?)
where…we're going next
"Script Loader of my dreams"
where…we're going next
• timeouts
• load abort
• error handling
• load priority
What else?
where…we're going next
And now for something completely different...
Questions?
http://pickaloader.com
Kyle Simpson@getify
http://getify.me
http://labjs.com
http://wiki.whatwg.org/wiki/Category:Proposals