all you need to know about javascript loading and execution in the browser - jsconf br 2013
DESCRIPTION
Techniques for fast and modular JS loading. Talk presented at JSConf Brazil 2013 in Fortaleza by Sérgio LopesTRANSCRIPT
![Page 1: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/1.jpg)
ALL YOU NEED TO KNOW ABOUTJAVASCRIPTLOADING AND EXECUTIONIN THE BROWSER
<SCRIPT language="JavaScript">//<![CDATA[alert('
');//]]></SCRIPT>
![Page 2: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/2.jpg)
@sergio_caelumsergiolopes.org
![Page 3: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/3.jpg)
<script src="/js/main.js"></script>
![Page 4: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/4.jpg)
THE END
![Page 5: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/5.jpg)
THE END?
![Page 6: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/6.jpg)
HOW BROWSERS LOAD AND EXECUTE JS
![Page 7: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/7.jpg)
disclaimer
![Page 8: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/8.jpg)
![Page 9: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/9.jpg)
![Page 10: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/10.jpg)
HOW BROWSERS LOAD AND EXECUTE JS
![Page 11: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/11.jpg)
<html><head> <script src="main.js"></script></head><body> ...</body></html>
![Page 12: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/12.jpg)
JS BLOCKS RENDERING
![Page 13: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/13.jpg)
![Page 14: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/14.jpg)
![Page 15: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/15.jpg)
![Page 16: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/16.jpg)
JS BLOCKS RENDERING
![Page 17: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/17.jpg)
JS BLOCKS RENDERINGNETWORK LATENCY
PARSING TIMEEXECUTION TIME
AVAILABILITY (SPOF)
![Page 18: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/18.jpg)
PUT JS AT BOTTOM
![Page 19: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/19.jpg)
<html><head> <script src="main.js"></script></head><body> ...
</body></html>
![Page 20: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/20.jpg)
<html><head>
</head><body> ... <script src="main.js"></script></body></html>
![Page 21: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/21.jpg)
DEFER
![Page 22: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/22.jpg)
<html><head> <script src="main.js" defer></script></head><body> ...</body></html>
![Page 23: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/23.jpg)
<html><head> <script src="main.js" defer></script> <script src="other.js" defer></script></head><body> ...</body></html>
![Page 24: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/24.jpg)
PUT JS AT BOTTOMPLUS: NO NEED FOR $(document).ready(..) ANYMORE
![Page 25: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/25.jpg)
MULTIPLE SCRIPTS
![Page 26: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/26.jpg)
<script src="jquery.js"></script><script src="jquery.plugin.js"></script><script src="application.js"></script>...
![Page 27: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/27.jpg)
![Page 28: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/28.jpg)
LATENCY
![Page 29: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/29.jpg)
SCRIPT CONCATENATION
![Page 30: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/30.jpg)
SCRIPT CONCATENATION1 SCRIPT? 2 SCRIPTs?
![Page 31: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/31.jpg)
SEQUENTIAL EXECUTION
![Page 32: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/32.jpg)
![Page 33: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/33.jpg)
ASYNC LOADING
![Page 34: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/34.jpg)
var js = document.createElement('script');js.src = 'script.js';document.head.appendChild(js);
![Page 35: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/35.jpg)
<script src="main.js" async></script><script src="other.js" async></script>
![Page 36: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/36.jpg)
<html><head> <script src="main.js" async></script> <script src="other.js" async></script></head><body>
</body></html>
![Page 37: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/37.jpg)
EXECUTION ORDER?
![Page 38: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/38.jpg)
SEPARATE DOWNLOAD FROM EXECUTION
![Page 39: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/39.jpg)
<script src="main.js" type="bla"></script>
![Page 40: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/40.jpg)
<script src="main.js"></script>
![Page 41: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/41.jpg)
<script src="main.js"></script>
/* alert('Everything commented out'); ... */
![Page 42: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/42.jpg)
<script src="main.js"></script>
/* alert('Everything commented out'); ... */
eval(js_code_inside_comments);
![Page 43: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/43.jpg)
new Image().src = 'script.js';
![Page 44: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/44.jpg)
new Image().src = 'script.js';
<script src="script.js"></script>
![Page 45: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/45.jpg)
var ajax = new XMLHttpRequest();
ajax.onreadystatechange = function(js){ if (ajax.readyState == 4) // execute js in order};
ajax.open('script.js');ajax.send();
Ajax
![Page 46: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/46.jpg)
var js = document.createElement('script');js.src = 'script.js';
IE
![Page 47: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/47.jpg)
var js = document.createElement('script');
js.src = 'script.js';
IE
js.onreadystatechange = function(){ if (js.readyState == 'loaded') document.head.appendChild(js);};
![Page 48: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/48.jpg)
var js = document.createElement('script');js.preload = true;js.onpreload = function(){ // ...};
js.src = 'script.js';
preload=true
![Page 49: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/49.jpg)
var js = document.createElement('script');js.async = false;js.src = 'script.js';document.head.appendChild(js);
async=false
![Page 50: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/50.jpg)
SCRIPT LOADERS
![Page 51: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/51.jpg)
$LAB.script('jquery.js').wait() .script('plugin1.js') .script('plugin2.js') .script('plugin3.js').wait() .script('application.js');
LABjs
![Page 52: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/52.jpg)
DISCOVERABILITY
![Page 53: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/53.jpg)
<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>
![Page 54: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/54.jpg)
<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>
![Page 55: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/55.jpg)
LOOK AHEAD PRE-PARSER
![Page 56: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/56.jpg)
<link rel="prefetch" href="script.js">
![Page 57: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/57.jpg)
<link rel="subresource" href="script.js">
![Page 58: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/58.jpg)
<link rel="subresource prefetch" href="script.js">
![Page 59: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/59.jpg)
ASYNC EXECUTION
![Page 60: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/60.jpg)
<script src="script1.js" async></script><script src="script2.js" async></script><script src="script3.js" async></script>
![Page 61: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/61.jpg)
DEPENDENCIES?
![Page 62: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/62.jpg)
order != dependency
![Page 63: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/63.jpg)
<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>
![Page 64: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/64.jpg)
AMDASYNCHRONOUS MODULE DEFINITION
* OR SOMETHING SIMILAR
![Page 65: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/65.jpg)
$('#panel').fadein();
![Page 66: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/66.jpg)
define('app', ['jquery'], function($) {
}); $('#panel').fadein();
![Page 67: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/67.jpg)
var jQuery = // ...
![Page 68: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/68.jpg)
var jQuery = // ... function() {
return jQuery;}
![Page 69: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/69.jpg)
define('jquery',[],
);
var jQuery = // ... function() {
return jQuery;}
![Page 70: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/70.jpg)
BETTER CODE
![Page 71: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/71.jpg)
ASYNC DEPENDENCY EXECUTION
![Page 72: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/72.jpg)
Require.js
![Page 73: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/73.jpg)
<script src="require.js" data-main= "myapp"></script>
![Page 74: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/74.jpg)
<script src="require.js" data-main= "myapp"></script>
myapp.js
![Page 75: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/75.jpg)
<script src="require.js" data-main= "myapp"></script>
myapp.js
mymodel.js mycontroller.js
![Page 76: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/76.jpg)
<script src="require.js" data-main= "myapp"></script>
myapp.js
mymodel.js mycontroller.js
util.js plugin1.js plugin2.js
![Page 77: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/77.jpg)
<script src="require.js" data-main= "myapp"></script>
myapp.js
mymodel.js mycontroller.js
jquery.js
util.js plugin1.js plugin2.js
![Page 78: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/78.jpg)
BUILD
![Page 79: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/79.jpg)
r.js + almond
![Page 80: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/80.jpg)
r.js + almondr.js -o baseUrl=. name=almond include=main out=all.js wrap=true
![Page 81: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/81.jpg)
<script src="all.js"></script>
myapp.js
mymodel.js mycontroller.js
jquery.js
util.js plugin1.js plugin2.js
all.js
almond.js
![Page 82: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/82.jpg)
myapp.js
mymodel.js mycontroller.js
jquery.js
util.js plugin1.js plugin2.js
almond.jsbase.js
mypage.js
<script src="base.js"></script><script src="mypage.js"></script>
![Page 83: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/83.jpg)
<script>/* 250b AMD define */</script>
<script src="base.js" async></script><script src="modules.js" async></script><script src="more.js" async></script>
![Page 84: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/84.jpg)
FUTURE
![Page 85: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/85.jpg)
TEST: 200 JS modules, ~13KB each
#1200 .js files + 1 HTML file<script async>HTTP
![Page 86: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/86.jpg)
![Page 87: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/87.jpg)
TEST: 200 JS modules, ~13KB each
#21 .js file + 1 HTML file<script async>HTTP
![Page 88: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/88.jpg)
![Page 89: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/89.jpg)
TEST: 200 JS modules, ~13KB each
#3200 .js files + 1 HTML file<script async>SPDY
![Page 90: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/90.jpg)
![Page 91: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/91.jpg)
200 files
1 file
0 12500 25000 37500 50000
HTTP:
![Page 92: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/92.jpg)
200 files
1 file
200 files
1 file
0 12500 25000 37500 50000
HTTP:
SPDY:
![Page 93: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/93.jpg)
SPDY & HTTP 2.0
![Page 94: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/94.jpg)
FUTURE #2
![Page 95: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/95.jpg)
module utils { var local = 0; export var exposed = "Public API";}
Modules
![Page 96: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/96.jpg)
Modules
module main { import exposed from utils; console.log(exposed);}
![Page 97: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/97.jpg)
ES-HARMONY
![Page 98: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/98.jpg)
<script>deferasync
SCRIPT LOADERSprefetch / subresource
AMDrequire.js / r.js / almond
SPDY & HTTP 2ES-HARMONY MODULES *
![Page 99: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/99.jpg)
ALL YOU NEED TO KNOW ABOUTJAVASCRIPTLOADING AND EXECUTIONIN THE BROWSER
<SCRIPT language="JavaScript">//<![CDATA[alert('
');//]]></SCRIPT>
![Page 100: All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013](https://reader034.vdocuments.us/reader034/viewer/2022051611/54b6af284a7959ad7b8b45d8/html5/thumbnails/100.jpg)
THANK YOUsergiolopes.org
@sergio_caelum
<SCRIPT language="JavaScript">//<![CDATA[alert('
');//]]></SCRIPT>