Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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

11,632 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>

×