Successfully reported this slideshow.
Your SlideShare is downloading. ×

All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013

Loading in …3
×

Check these out next

1 of 100 Ad
1 of 100 Ad
Advertisement

More Related Content

Advertisement
Advertisement

All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013

  1. ALL YOU NEED TO KNOW ABOUT JAVASCRIPTLOADING AND EXECUTION IN THE BROWSER <SCRIPT language="JavaScript"> //<![CDATA[ alert(' '); //]]> </SCRIPT>
  2. @sergio_caelum sergiolopes.org
  3. <script src="/js/main.js"></script>
  4. THE END
  5. THE END?
  6. HOW BROWSERS LOAD AND EXECUTE JS
  7. disclaimer
  8. HOW BROWSERS LOAD AND EXECUTE JS
  9. <html> <head> <script src="main.js"></script> </head> <body> ... </body> </html>
  10. JS BLOCKS RENDERING
  11. JS BLOCKS RENDERING
  12. JS BLOCKS RENDERING NETWORK LATENCY PARSING TIME EXECUTION TIME AVAILABILITY (SPOF)
  13. PUT JS AT BOTTOM
  14. <html> <head> <script src="main.js"></script> </head> <body> ... </body> </html>
  15. <html> <head> </head> <body> ... <script src="main.js"></script> </body> </html>
  16. DEFER
  17. <html> <head> <script src="main.js" defer></script> </head> <body> ... </body> </html>
  18. <html> <head> <script src="main.js" defer></script> <script src="other.js" defer></script> </head> <body> ... </body> </html>
  19. PUT JS AT BOTTOM PLUS: NO NEED FOR $(document).ready(..) ANYMORE
  20. MULTIPLE SCRIPTS
  21. <script src="jquery.js"></script> <script src="jquery.plugin.js"></script> <script src="application.js"></script> ...
  22. LATENCY
  23. SCRIPT CONCATENATION
  24. SCRIPT CONCATENATION 1 SCRIPT? 2 SCRIPTs?
  25. SEQUENTIAL EXECUTION
  26. ASYNC LOADING
  27. var js = document.createElement('script'); js.src = 'script.js'; document.head.appendChild(js);
  28. <script src="main.js" async></script> <script src="other.js" async></script>
  29. <html> <head> <script src="main.js" async></script> <script src="other.js" async></script> </head> <body> </body> </html>
  30. EXECUTION ORDER?
  31. SEPARATE DOWNLOAD FROM EXECUTION
  32. <script src="main.js" type="bla"></script>
  33. <script src="main.js"></script>
  34. <script src="main.js"></script> /* alert('Everything commented out'); ... */
  35. <script src="main.js"></script> /* alert('Everything commented out'); ... */ eval(js_code_inside_comments);
  36. new Image().src = 'script.js';
  37. new Image().src = 'script.js'; <script src="script.js"></script>
  38. var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function(js){ if (ajax.readyState == 4) // execute js in order }; ajax.open('script.js'); ajax.send(); Ajax
  39. var js = document.createElement('script'); js.src = 'script.js'; IE
  40. var js = document.createElement('script'); js.src = 'script.js'; IE js.onreadystatechange = function(){ if (js.readyState == 'loaded') document.head.appendChild(js); };
  41. var js = document.createElement('script'); js.preload = true; js.onpreload = function(){ // ... }; js.src = 'script.js'; preload=true
  42. var js = document.createElement('script'); js.async = false; js.src = 'script.js'; document.head.appendChild(js); async=false
  43. SCRIPT LOADERS
  44. $LAB.script('jquery.js').wait() .script('plugin1.js') .script('plugin2.js') .script('plugin3.js').wait() .script('application.js'); LABjs
  45. DISCOVERABILITY
  46. <script src="labjs.js"></script> <script> $LAB.script('jquery.js').wait() .script('plugin1.js') .script('plugin2.js') .script('plugin3.js').wait() .script('application.js'); </script>
  47. <script> /* inline ~2KB do LABjs */ </script> <script> $LAB.script('jquery.js').wait() .script('plugin1.js') .script('plugin2.js') .script('plugin3.js').wait() .script('application.js'); </script>
  48. LOOK AHEAD PRE-PARSER
  49. <link rel="prefetch" href="script.js">
  50. <link rel="subresource" href="script.js">
  51. <link rel="subresource prefetch" href="scri
  52. ASYNC EXECUTION
  53. <script src="script1.js" async></script> <script src="script2.js" async></script> <script src="script3.js" async></script>
  54. DEPENDENCIES?
  55. order != dependency
  56. <script src="script1.js"></script> <script src="script2.js"></script> <script src="script3.js"></script> <script src="script4.js"></script> <script src="script5.js"></script>
  57. AMD ASYNCHRONOUS MODULE DEFINITION * OR SOMETHING SIMILAR
  58. $('#panel').fadein();
  59. define('app', ['jquery'], function($) { }); $('#panel').fadein();
  60. var jQuery = // ...
  61. var jQuery = // ... function() { return jQuery; }
  62. define('jquery',[], ); var jQuery = // ... function() { return jQuery; }
  63. BETTER CODE
  64. ASYNC DEPENDENCY EXECUTION
  65. Require.js
  66. <script src="require.js" data-main= "myapp"></script>
  67. <script src="require.js" data-main= "myapp"></script> myapp.js
  68. <script src="require.js" data-main= "myapp"></script> myapp.js mymodel.js mycontroller.js
  69. <script src="require.js" data-main= "myapp"></script> myapp.js mymodel.js mycontroller.js util.js plugin1.js plugin2.js
  70. <script src="require.js" data-main= "myapp"></script> myapp.js mymodel.js mycontroller.js jquery.js util.js plugin1.js plugin2.js
  71. BUILD
  72. r.js + almond
  73. r.js + almond r.js -o baseUrl=. name=almond include=main out=all.js wrap=true
  74. <script src="all.js"></script> myapp.js mymodel.js mycontroller.js jquery.js util.js plugin1.js plugin2.js all.js almond.js
  75. myapp.js mymodel.js mycontroller.js jquery.js util.js plugin1.js plugin2.js almond.js base.js mypage.js <script src="base.js"></script> <script src="mypage.js"></script>
  76. <script>/* 250b AMD define */</script> <script src="base.js" async></script> <script src="modules.js" async></script> <script src="more.js" async></script>
  77. FUTURE
  78. TEST: 200 JS modules,~13KB each #1 200 .js files + 1 HTML file <script async> HTTP
  79. TEST: 200 JS modules,~13KB each #2 1 .js file + 1 HTML file <script async> HTTP
  80. TEST: 200 JS modules,~13KB each #3 200 .js files + 1 HTML file <script async> SPDY
  81. 200 files 1 file 0 12500 25000 37500 50000 HTTP:
  82. 200 files 1 file 200 files 1 file 0 12500 25000 37500 50000 HTTP: SPDY:
  83. SPDY & HTTP 2.0
  84. FUTURE #2
  85. module utils { var local = 0; export var exposed = "Public API"; } Modules
  86. Modules module main { import exposed from utils; console.log(exposed); }
  87. ES-HARMONY
  88. <script> defer async SCRIPT LOADERS prefetch / subresource AMD require.js / r.js / almond SPDY & HTTP 2 ES-HARMONY MODULES *
  89. ALL YOU NEED TO KNOW ABOUT JAVASCRIPTLOADING AND EXECUTION IN THE BROWSER <SCRIPT language="JavaScript"> //<![CDATA[ alert(' '); //]]> </SCRIPT>
  90. THANK YOU sergiolopes.org @sergio_caelum <SCRIPT language="JavaScript"> //<![CDATA[ alert(' '); //]]> </SCRIPT>

×