The Once and Future   Script Loader               Kyle Simpson                     @getify             http://getify.me
<script>
Why not just combine all your files?• different pages, different scripts• cacheability• parallel loading• on-demand/lazy-l...
concat vs. parallel?     BOTH
document.write()
document.write()     Must     Die!
Performance
IE7-, FF3-, Opera
IE8, FF3.5/3.6, Chr 14-
IE9+, FF4+Script Loaders
comparing DOM-ready times across loading techniques
<script> tags also suck because... • browser-specific scripts • conditional loading/URLs • event handling
WTF Loaderdocument.write("<script src=...></sc"+"ript>");
Surely we can do better!?
XHR?
Making progress... but not there yet
Whats hard about script loading?
A general script loader should...• load any script, at any time, fromanywhere... except document.write()• have performance...
A general script loader should also...• avoid: hacks, UA sniffing• feature-detect• have as few exception-cases as possible
General script loader feature creep...• trying to handle document.write()• loading CSS• dependency management• delaying DO...
Script loading requires...• loading many scripts in parallel(race to finish loading ASAP)• ensuring execution order (not A...
LABjs
LABjs: performance  script loader
LABjs: performance  script loader
What was wrong with LABjs?• ugly source code• lots of hacks• exception cases• brittle (not future proof)
LABjs 2.0• readable source code• "future proof " feature detects• fewer exception cases• better performance             ht...
Anyone can write a loader!     (and many devs have)
https://spreadsheets0.google.com/spreadsheet/ccc?key=tDdcrv9wNQRCNCRCflWxhYQ
Loaders are competing more on APIs than onfeatures or performance
Theyre also copyingeach other (good and bad)
But, can theirfunctionality be   trusted?
Testing is much harder than       most realize
What should a loader do?
Real Preloadinghttp://wiki.whatwg.org/wiki/Script_Execution_Control
IE4+ ftw?
Ordered Async                    async=falseFF4+, Chr 12+, IE10p2+, Webkit/Safari, Opera (soon!)   http://wiki.whatwg.org/...
How?1. try real preloading2. try ordered async3. try same-domain XHR4. fall back on "cache preloading"
Competition is good, only if community is educated
Browsers do not yet give us   what we really need
Co-opetition is much  healthier for the    community
W3C, WHATWGhttp://wiki.whatwg.org/wiki/Category:Proposals
W3C, WHATWGhttp://ygp.go.ly/script-preloadinghttp://odq.go.ly/load-error-events
Well accomplish more if we       work together
Future, The Script Loader
Preloading(deferred execution)
Modules(CommonJS, AMD, etc)
Native Modules(ES-Harmony?)
"Script Loader of my dreams"
What else?• timeouts• load abort• error handling• load priority
And now for somethingcompletely different...      Questions?
Kyle Simpson                                         @getify                                 http://getify.mehttp://wiki.w...
The Once And Future Script Loader (v3)
Upcoming SlideShare
Loading in …5
×

The Once And Future Script Loader (v3)

3,596
-1

Published on

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,596
On Slideshare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

The Once And Future Script Loader (v3)

  1. The Once and Future Script Loader Kyle Simpson @getify http://getify.me
  2. <script>
  3. Why not just combine all your files?• different pages, different scripts• cacheability• parallel loading• on-demand/lazy-loading
  4. concat vs. parallel? BOTH
  5. document.write()
  6. document.write() Must Die!
  7. Performance
  8. IE7-, FF3-, Opera
  9. IE8, FF3.5/3.6, Chr 14-
  10. IE9+, FF4+Script Loaders
  11. comparing DOM-ready times across loading techniques
  12. <script> tags also suck because... • browser-specific scripts • conditional loading/URLs • event handling
  13. WTF Loaderdocument.write("<script src=...></sc"+"ript>");
  14. Surely we can do better!?
  15. XHR?
  16. Making progress... but not there yet
  17. Whats hard about script loading?
  18. A general script loader should...• load any script, at any time, fromanywhere... except document.write()• have performance at or better than<script> in modern browsers• equivalent behavior in all browsers
  19. A general script loader should also...• avoid: hacks, UA sniffing• feature-detect• have as few exception-cases as possible
  20. General script loader feature creep...• trying to handle document.write()• loading CSS• dependency management• delaying DOM-ready
  21. Script loading requires...• loading many scripts in parallel(race to finish loading ASAP)• ensuring execution order (not ASAP)
  22. LABjs
  23. LABjs: performance script loader
  24. LABjs: performance script loader
  25. What was wrong with LABjs?• ugly source code• lots of hacks• exception cases• brittle (not future proof)
  26. LABjs 2.0• readable source code• "future proof " feature detects• fewer exception cases• better performance http://labjs.com
  27. Anyone can write a loader! (and many devs have)
  28. https://spreadsheets0.google.com/spreadsheet/ccc?key=tDdcrv9wNQRCNCRCflWxhYQ
  29. Loaders are competing more on APIs than onfeatures or performance
  30. Theyre also copyingeach other (good and bad)
  31. But, can theirfunctionality be trusted?
  32. Testing is much harder than most realize
  33. What should a loader do?
  34. Real Preloadinghttp://wiki.whatwg.org/wiki/Script_Execution_Control
  35. IE4+ ftw?
  36. Ordered Async async=falseFF4+, Chr 12+, IE10p2+, Webkit/Safari, Opera (soon!) http://wiki.whatwg.org/wiki/Dynamic_Script_Execution_Order
  37. How?1. try real preloading2. try ordered async3. try same-domain XHR4. fall back on "cache preloading"
  38. Competition is good, only if community is educated
  39. Browsers do not yet give us what we really need
  40. Co-opetition is much healthier for the community
  41. W3C, WHATWGhttp://wiki.whatwg.org/wiki/Category:Proposals
  42. W3C, WHATWGhttp://ygp.go.ly/script-preloadinghttp://odq.go.ly/load-error-events
  43. Well accomplish more if we work together
  44. Future, The Script Loader
  45. Preloading(deferred execution)
  46. Modules(CommonJS, AMD, etc)
  47. Native Modules(ES-Harmony?)
  48. "Script Loader of my dreams"
  49. What else?• timeouts• load abort• error handling• load priority
  50. And now for somethingcompletely different... Questions?
  51. Kyle Simpson @getify http://getify.mehttp://wiki.whatwg.org/wiki/Category:Proposals http://labjs.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×