The Once And Future Script Loader (v3)
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,377
On Slideshare
3,231
From Embeds
146
Number of Embeds
15

Actions

Shares
Downloads
26
Comments
0
Likes
2

Embeds 146

http://speakerrate.com 53
http://lanyrd.com 47
http://presentworth.blogspot.com 19
http://us-w1.rockmelt.com 8
http://paper.li 6
http://user03.in-set.com 3
http://presentworth.blogspot.ca 2
http://presentworth.blogspot.dk 1
http://presentworth.blogspot.hu 1
http://presentworth.blogspot.in 1
http://presentworth.blogspot.it 1
https://crowdflower.com 1
http://www.linkedin.com 1
http://tweetedtimes.com 1
http://presentworth.blogspot.hk 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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