All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
•
22 likes•13,576 views
Techniques for fast and modular JS loading. Talk presented at JSConf Brazil 2013 in Fortaleza by Sérgio Lopes
![ALL YOU NEED
TO KNOW ABOUT
JAVASCRIPTLOADING AND EXECUTION
IN THE BROWSER
<SCRIPT language="JavaScript">
//<![CDATA[
alert('
');
//]]>
</SCRIPT>](https://image.slidesharecdn.com/javascript-loading-sergio-jsconfbr2013-130624171721-phpapp01/85/all-you-need-to-know-about-javascript-loading-and-execution-in-the-browser-jsconf-br-2013-1-320.jpg)
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (10)
Similar to All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
Similar to All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013 (20)
More from Caelum
More from Caelum (20)
Recently uploaded
Recently uploaded (20)
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>
- 4. THE END
- 5. THE END?
- 6. HOW BROWSERS LOAD AND EXECUTE JS
- 7. disclaimer
- 10. HOW BROWSERS LOAD AND EXECUTE JS
- 17. JS BLOCKS RENDERING NETWORK LATENCY PARSING TIME EXECUTION TIME AVAILABILITY (SPOF)
- 18. PUT JS AT BOTTOM
- 21. DEFER
- 23. <html> <head> <script src="main.js" defer></script> <script src="other.js" defer></script> </head> <body> ... </body> </html>
- 24. PUT JS AT BOTTOM PLUS: NO NEED FOR $(document).ready(..) ANYMORE
- 25. MULTIPLE SCRIPTS
- 26. <script src="jquery.js"></script> <script src="jquery.plugin.js"></script> <script src="application.js"></script> ...
- 28. LATENCY
- 30. SCRIPT CONCATENATION 1 SCRIPT? 2 SCRIPTs?
- 33. ASYNC LOADING
- 34. var js = document.createElement('script'); js.src = 'script.js'; document.head.appendChild(js);
- 35. <script src="main.js" async></script> <script src="other.js" async></script>
- 36. <html> <head> <script src="main.js" async></script> <script src="other.js" async></script> </head> <body> </body> </html>
- 37. EXECUTION ORDER?
- 41. <script src="main.js"></script> /* alert('Everything commented out'); ... */
- 42. <script src="main.js"></script> /* alert('Everything commented out'); ... */ eval(js_code_inside_comments);
- 43. new Image().src = 'script.js';
- 44. new Image().src = 'script.js'; <script src="script.js"></script>
- 45. var ajax = new XMLHttpRequest(); ajax.onreadystatechange = function(js){ if (ajax.readyState == 4) // execute js in order }; ajax.open('script.js'); ajax.send(); Ajax
- 46. var js = document.createElement('script'); js.src = 'script.js'; IE
- 47. var js = document.createElement('script'); js.src = 'script.js'; IE js.onreadystatechange = function(){ if (js.readyState == 'loaded') document.head.appendChild(js); };
- 48. var js = document.createElement('script'); js.preload = true; js.onpreload = function(){ // ... }; js.src = 'script.js'; preload=true
- 49. var js = document.createElement('script'); js.async = false; js.src = 'script.js'; document.head.appendChild(js); async=false
- 50. SCRIPT LOADERS
- 52. DISCOVERABILITY
- 54. <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>
- 58. <link rel="subresource prefetch" href="scri
- 59. ASYNC EXECUTION
- 60. <script src="script1.js" async></script> <script src="script2.js" async></script> <script src="script3.js" async></script>
- 61. DEPENDENCIES?
- 63. <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>
- 64. AMD ASYNCHRONOUS MODULE DEFINITION * OR SOMETHING SIMILAR
- 66. define('app', ['jquery'], function($) { }); $('#panel').fadein();
- 67. var jQuery = // ...
- 68. var jQuery = // ... function() { return jQuery; }
- 69. define('jquery',[], ); var jQuery = // ... function() { return jQuery; }
- 70. BETTER CODE
- 72. Require.js
- 75. <script src="require.js" data-main= "myapp"></script> myapp.js mymodel.js mycontroller.js
- 76. <script src="require.js" data-main= "myapp"></script> myapp.js mymodel.js mycontroller.js util.js plugin1.js plugin2.js
- 77. <script src="require.js" data-main= "myapp"></script> myapp.js mymodel.js mycontroller.js jquery.js util.js plugin1.js plugin2.js
- 78. BUILD
- 79. r.js + almond
- 80. r.js + almond r.js -o baseUrl=. name=almond include=main out=all.js wrap=true
- 81. <script src="all.js"></script> myapp.js mymodel.js mycontroller.js jquery.js util.js plugin1.js plugin2.js all.js almond.js
- 82. 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>
- 83. <script>/* 250b AMD define */</script> <script src="base.js" async></script> <script src="modules.js" async></script> <script src="more.js" async></script>
- 84. FUTURE
- 85. TEST: 200 JS modules,~13KB each #1 200 .js files + 1 HTML file <script async> HTTP
- 87. TEST: 200 JS modules,~13KB each #2 1 .js file + 1 HTML file <script async> HTTP
- 89. TEST: 200 JS modules,~13KB each #3 200 .js files + 1 HTML file <script async> SPDY
- 91. 200 files 1 file 0 12500 25000 37500 50000 HTTP:
- 92. 200 files 1 file 200 files 1 file 0 12500 25000 37500 50000 HTTP: SPDY:
- 93. SPDY & HTTP 2.0
- 94. FUTURE #2
- 95. module utils { var local = 0; export var exposed = "Public API"; } Modules
- 96. Modules module main { import exposed from utils; console.log(exposed); }
- 97. ES-HARMONY
- 98. <script> defer async SCRIPT LOADERS prefetch / subresource AMD require.js / r.js / almond SPDY & HTTP 2 ES-HARMONY MODULES *
- 99. ALL YOU NEED TO KNOW ABOUT JAVASCRIPTLOADING AND EXECUTION IN THE BROWSER <SCRIPT language="JavaScript"> //<![CDATA[ alert(' '); //]]> </SCRIPT>