The Once And Future Script Loader (v2)

1,764 views

Published on

A look at the history, current state, and hopeful future state of script loading in browsers.

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

  • Be the first to like this

No Downloads
Views
Total views
1,764
On SlideShare
0
From Embeds
0
Number of Embeds
62
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The Once And Future Script Loader (v2)

  1. 1. T he O nce and F uture S cript L oader Kyle Simpson @getify http://getify.me
  2. 2. where…we were once upon a time, in a browser far, far away…
  3. 3. <script src=&quot;…&quot;></script> where…we were
  4. 4. <script src=&quot;…&quot;></script> <script src=&quot;…&quot;></script> <script src=&quot;…&quot;></script> <script src=&quot;…&quot;></script> <script src=&quot;…&quot;></script> <script src=&quot;…&quot;></script> … where…we were
  5. 5. Why not just combine all your files? <ul><li>different pages, different scripts </li></ul><ul><li>cacheability </li></ul><ul><li>parallel loading </li></ul><ul><li>on-demand/lazy-loading </li></ul>where…we were
  6. 6. <script> tags block. bad. evil. where…we were
  7. 7. What do <script> tags block, and why ? <ul><li>other <script> tags </li></ul><ul><li>other content (loading & rendering) </li></ul><ul><li>DOM-ready </li></ul>where…we were
  8. 8. IE7-, FF3-, Opera where…we were
  9. 9. IE8, FF3.5/3.6, Chr 14- where…we were
  10. 10. IE9+, FF4+ Script Loaders where…we were
  11. 11. document.write() where…we were
  12. 12. document.write() Must Die! where…we were
  13. 13. <script> tags also suck because... <ul><li>browser-specific scripts </li></ul><ul><li>conditional loading/URLs </li></ul><ul><li>event handling </li></ul>where…we were
  14. 14. The very first script loader? document.write(&quot;<script src='...'></sc&quot;+&quot;ript>&quot;); where…we were
  15. 15. w ho- tf ? ...and still many ad providers, 3rd party widgets, etc. where…we were
  16. 16. Surely we can do better!? where…we were
  17. 17. XHR? where…we were
  18. 18. Framework-specific loaders... ...just stink where…we were
  19. 19. Making progress... but not there yet where…we were
  20. 20. What's hard about script loading? where…we were
  21. 21. A general script loader should : <ul><li>load any script, at any time, from anywhere... except document.write() </li></ul><ul><li>have performance at or better than <script> in modern browsers </li></ul><ul><li>equivalent behavior in all browsers </li></ul>where…we were
  22. 22. A general script loader should also : <ul><li>avoid: hacks, UA sniffing </li></ul><ul><li>feature-detect </li></ul><ul><li>have as few exception-cases as possible </li></ul>where…we were
  23. 23. General script loader feature creep: <ul><li>trying to handle document.write() </li></ul><ul><li>loading CSS </li></ul><ul><li>&quot;dependency management&quot; </li></ul><ul><li>delaying DOM-ready </li></ul>where…we were
  24. 24. <ul><li>load many scripts in parallel (race to finish loading ASAP) </li></ul><ul><li>ensure execution order ( not ASAP) </li></ul>Script loading requires: where…we were
  25. 25. <script> tags (even dynamically created) give you no control over loading or execution where…we were
  26. 26. The spec says that dynamic scripts should load and run ASAP (not ordered) umm... where…we were
  27. 27. All current browser versions except Opera (but soon!) follow the spec uh oh where…we were
  28. 28. Some older browsers execute in order, some don't doh! Some older browsers load in parallel, some don't where…we were
  29. 29. Not for the faint of heart where…we were
  30. 30. A young leader? LABjs where…we were
  31. 31. LABjs: performance script loader where…we were
  32. 32. where…we were LABjs: performance script loader
  33. 33. What was wrong with LABjs? <ul><li>ugly source code </li></ul><ul><li>lots of hacks </li></ul><ul><li>exception cases </li></ul><ul><li>brittle (not future proof) </li></ul>where…we were
  34. 34. Anyone can write a loader! where…we are now (and many devs have)
  35. 35. where…we are now https://spreadsheets0.google.com/spreadsheet/ccc?key=tDdcrv9wNQRCNCRCflWxhYQ
  36. 36. Loaders are competing more on APIs than on features or performance where…we are now
  37. 37. They're also copying each other (good and bad) where…we are now
  38. 38. But, can their functionality be trusted? where…we are now
  39. 39. Testing is much harder than most realize where…we are now
  40. 40. &quot;Browser support&quot; is vague where…we are now
  41. 41. Exception cases often ignored or overlooked where…we are now
  42. 42. Browser Sniffs, Hacks where…we are now
  43. 43. What should a loader do? where…we are now
  44. 44. Real Preloading http://wiki.whatwg.org/wiki/Script_Execution_Control where…we are now
  45. 45. IE4+ ftw? where…we are now
  46. 46. 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
  47. 47. <ul><li>try real preloading </li></ul><ul><li>try ordered async </li></ul><ul><li>try same-domain XHR </li></ul><ul><li>fall back on &quot;cache preloading&quot; </li></ul>How? where…we are now
  48. 48. LABjs 2.0 <ul><li>readable source code </li></ul><ul><li>&quot;future proof &quot; feature detects </li></ul><ul><li>fewer exception cases </li></ul><ul><li>better performance </li></ul>http://labjs.com/releasenotes.php where…we are now
  49. 49. What happens next? where…we're going next
  50. 50. Competition is good, only if community is educated where…we're going next
  51. 51. http://Pick A Loader.com where…we're going next (coming soon)
  52. 52. Browsers do not yet give us what we really need where…we're going next
  53. 53. Co-opetition is much healthier for the community where…we're going next
  54. 54. Only script loaders which help build the future will survive where…we're going next
  55. 55. W3C, WHATWG http://wiki.whatwg.org/wiki/Category:Proposals where…we're going next
  56. 56. We'll accomplish more if we work together where…we're going next
  57. 57. Future, The Script Loader where…we're going next
  58. 58. Preloading (deferred execution) where…we're going next
  59. 59. Modules (CommonJS, AMD, etc) where…we're going next
  60. 60. Native Modules (ES-Harmony?) where…we're going next
  61. 62. &quot;Script Loader of my dreams&quot; where…we're going next
  62. 63. <ul><li>timeouts </li></ul><ul><li>load abort </li></ul><ul><li>error handling </li></ul><ul><li>load priority </li></ul>What else? where…we're going next
  63. 64. And now for something completely different... Questions?
  64. 65. http://pickaloader.com Kyle Simpson @getify http://getify.me http://labjs.com http://wiki.whatwg.org/wiki/Category:Proposals

×