ALL YOU NEEDTO KNOW ABOUTJAVASCRIPTLOADING AND EXECUTIONIN THE BROWSER<SCRIPT language="JavaScript">//<![CDATA[alert();//]...
@sergio_caelumsergiolopes.org
<script src="/js/main.js"></script>
THE END
THE END?
HOW BROWSERSLOAD AND EXECUTE JS
disclaimer
HOW BROWSERSLOAD AND EXECUTE JS
<html><head><script src="main.js"></script></head><body>...</body></html>
JS BLOCKS RENDERING
JS BLOCKS RENDERING
JS BLOCKS RENDERINGNETWORK LATENCYPARSING TIMEEXECUTION TIMEAVAILABILITY (SPOF)
PUT JS AT BOTTOM
<html><head><script src="main.js"></script></head><body>...</body></html>
<html><head></head><body>...<script src="main.js"></script></body></html>
DEFER
<html><head><script src="main.js" defer></script></head><body>...</body></html>
<html><head><script src="main.js" defer></script><script src="other.js" defer></script></head><body>...</body></html>
PUT JS AT BOTTOMPLUS: NO NEED FOR $(document).ready(..) ANYMORE
MULTIPLE SCRIPTS
<script src="jquery.js"></script><script src="jquery.plugin.js"></script><script src="application.js"></script>...
LATENCY
SCRIPT CONCATENATION
SCRIPT CONCATENATION1 SCRIPT? 2 SCRIPTs?
SEQUENTIAL EXECUTION
ASYNC LOADING
var js = document.createElement(script);js.src = script.js;document.head.appendChild(js);
<script src="main.js" async></script><script src="other.js" async></script>
<html><head><script src="main.js" async></script><script src="other.js" async></script></head><body></body></html>
EXECUTION ORDER?
SEPARATE DOWNLOADFROM EXECUTION
<script src="main.js" type="bla"></script>
<script src="main.js"></script>
<script src="main.js"></script>/*alert(Everything commented out);...*/
<script src="main.js"></script>/*alert(Everything commented out);...*/eval(js_code_inside_comments);
new Image().src = script.js;
new Image().src = script.js;<script src="script.js"></script>
var ajax = new XMLHttpRequest();ajax.onreadystatechange = function(js){if (ajax.readyState == 4)// execute js in order};aj...
var js = document.createElement(script);js.src = script.js;IE
var js = document.createElement(script);js.src = script.js;IEjs.onreadystatechange = function(){if (js.readyState == loade...
var js = document.createElement(script);js.preload = true;js.onpreload = function(){// ...};js.src = script.js;preload=true
var js = document.createElement(script);js.async = false;js.src = script.js;document.head.appendChild(js);async=false
SCRIPT LOADERS
$LAB.script(jquery.js).wait().script(plugin1.js).script(plugin2.js).script(plugin3.js).wait().script(application.js);LABjs
DISCOVERABILITY
<script src="labjs.js"></script><script>$LAB.script(jquery.js).wait().script(plugin1.js).script(plugin2.js).script(plugin3...
<script>/* inline ~2KB do LABjs */</script><script>$LAB.script(jquery.js).wait().script(plugin1.js).script(plugin2.js).scr...
LOOK AHEAD PRE-PARSER
<link rel="prefetch" href="script.js">
<link rel="subresource" href="script.js">
<link rel="subresource prefetch" href="scri
ASYNC EXECUTION
<script src="script1.js" async></script><script src="script2.js" async></script><script src="script3.js" async></script>
DEPENDENCIES?
order != dependency
<script src="script1.js"></script><script src="script2.js"></script><script src="script3.js"></script><script src="script4...
AMDASYNCHRONOUS MODULE DEFINITION* OR SOMETHING SIMILAR
$(#panel).fadein();
define(app, [jquery], function($) {});$(#panel).fadein();
var jQuery = // ...
var jQuery = // ...function() {return jQuery;}
define(jquery,[],);var jQuery = // ...function() {return jQuery;}
BETTER CODE
ASYNC DEPENDENCYEXECUTION
Require.js
<script src="require.js"data-main= "myapp"></script>
<script src="require.js"data-main= "myapp"></script>myapp.js
<script src="require.js"data-main= "myapp"></script>myapp.jsmymodel.js mycontroller.js
<script src="require.js"data-main= "myapp"></script>myapp.jsmymodel.js mycontroller.jsutil.js plugin1.js plugin2.js
<script src="require.js"data-main= "myapp"></script>myapp.jsmymodel.js mycontroller.jsjquery.jsutil.js plugin1.js plugin2.js
BUILD
r.js + almond
r.js + almondr.js -o baseUrl=. name=almond include=main out=all.js wrap=true
<script src="all.js"></script>myapp.jsmymodel.js mycontroller.jsjquery.jsutil.js plugin1.js plugin2.jsall.jsalmond.js
myapp.jsmymodel.js mycontroller.jsjquery.jsutil.js plugin1.js plugin2.jsalmond.jsbase.jsmypage.js<script src="base.js"></s...
<script>/* 250b AMD define */</script><script src="base.js" async></script><script src="modules.js" async></script><script...
FUTURE
TEST: 200 JS modules,~13KB each#1200 .js files + 1 HTML file<script async>HTTP
TEST: 200 JS modules,~13KB each#21 .js file + 1 HTML file<script async>HTTP
TEST: 200 JS modules,~13KB each#3200 .js files + 1 HTML file<script async>SPDY
200 files1 file0 12500 25000 37500 50000HTTP:
200 files1 file200 files1 file0 12500 25000 37500 50000HTTP:SPDY:
SPDY & HTTP 2.0
FUTURE #2
module utils {var local = 0;export var exposed = "Public API";}Modules
Modulesmodule main {import exposed from utils;console.log(exposed);}
ES-HARMONY
<script>deferasyncSCRIPT LOADERSprefetch / subresourceAMDrequire.js / r.js / almondSPDY & HTTP 2ES-HARMONY MODULES *
ALL YOU NEEDTO KNOW ABOUTJAVASCRIPTLOADING AND EXECUTIONIN THE BROWSER<SCRIPT language="JavaScript">//<![CDATA[alert();//]...
THANK YOUsergiolopes.org@sergio_caelum<SCRIPT language="JavaScript">//<![CDATA[alert();//]]></SCRIPT>
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
Upcoming SlideShare
Loading in …5
×

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

10,758 views

Published on

Techniques for fast and modular JS loading. Talk presented at JSConf Brazil 2013 in Fortaleza by Sérgio Lopes

Published in: Technology

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

  1. ALL YOU NEEDTO KNOW ABOUTJAVASCRIPTLOADING AND EXECUTIONIN THE BROWSER<SCRIPT language="JavaScript">//<![CDATA[alert();//]]></SCRIPT>
  2. @sergio_caelumsergiolopes.org
  3. <script src="/js/main.js"></script>
  4. THE END
  5. THE END?
  6. HOW BROWSERSLOAD AND EXECUTE JS
  7. disclaimer
  8. HOW BROWSERSLOAD 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 RENDERINGNETWORK LATENCYPARSING TIMEEXECUTION TIMEAVAILABILITY (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 BOTTOMPLUS: 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 CONCATENATION1 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 DOWNLOADFROM 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;IEjs.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. AMDASYNCHRONOUS 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 DEPENDENCYEXECUTION
  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.jsmymodel.js mycontroller.js
  69. <script src="require.js"data-main= "myapp"></script>myapp.jsmymodel.js mycontroller.jsutil.js plugin1.js plugin2.js
  70. <script src="require.js"data-main= "myapp"></script>myapp.jsmymodel.js mycontroller.jsjquery.jsutil.js plugin1.js plugin2.js
  71. BUILD
  72. r.js + almond
  73. r.js + almondr.js -o baseUrl=. name=almond include=main out=all.js wrap=true
  74. <script src="all.js"></script>myapp.jsmymodel.js mycontroller.jsjquery.jsutil.js plugin1.js plugin2.jsall.jsalmond.js
  75. myapp.jsmymodel.js mycontroller.jsjquery.jsutil.js plugin1.js plugin2.jsalmond.jsbase.jsmypage.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#1200 .js files + 1 HTML file<script async>HTTP
  79. TEST: 200 JS modules,~13KB each#21 .js file + 1 HTML file<script async>HTTP
  80. TEST: 200 JS modules,~13KB each#3200 .js files + 1 HTML file<script async>SPDY
  81. 200 files1 file0 12500 25000 37500 50000HTTP:
  82. 200 files1 file200 files1 file0 12500 25000 37500 50000HTTP:SPDY:
  83. SPDY & HTTP 2.0
  84. FUTURE #2
  85. module utils {var local = 0;export var exposed = "Public API";}Modules
  86. Modulesmodule main {import exposed from utils;console.log(exposed);}
  87. ES-HARMONY
  88. <script>deferasyncSCRIPT LOADERSprefetch / subresourceAMDrequire.js / r.js / almondSPDY & HTTP 2ES-HARMONY MODULES *
  89. ALL YOU NEEDTO KNOW ABOUTJAVASCRIPTLOADING AND EXECUTIONIN THE BROWSER<SCRIPT language="JavaScript">//<![CDATA[alert();//]]></SCRIPT>
  90. THANK YOUsergiolopes.org@sergio_caelum<SCRIPT language="JavaScript">//<![CDATA[alert();//]]></SCRIPT>

×