Your SlideShare is downloading. ×

The Once And Future Script Loader (v3)

3,020

Published on

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

No Downloads
Views
Total Views
3,020
On Slideshare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
26
Comments
0
Likes
2
Embeds 0
No embeds

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

×