Downloaded 67 times
![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)
![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/75/All-you-need-to-know-about-JavaScript-loading-and-execution-in-the-browser-JSConf-BR-2013-1-2048.jpg)
![define('app', ['jquery'], function($) {
});
$('#panel').fadein();](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-66-320.jpg)
![define('jquery',[],
);
var jQuery = // ...
function() {
return jQuery;
}](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-69-320.jpg)
![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-99-320.jpg)
![THANK YOU
sergiolopes.org
@sergio_caelum
<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-100-320.jpg)
Uploaded byCaelum
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
The document provides a comprehensive overview of how browsers load and execute JavaScript, discussing techniques for optimizing loading times, such as placing scripts at the bottom of the page or using 'defer' and 'async' attributes. It also addresses script execution order, module definitions, and various script loading libraries, alongside considerations for network latency and dependencies. Additionally, it highlights future trends in JavaScript module management and improves efficiency in execution order through techniques like AMD and common module loaders.
More Related Content
![[QCon 2011] Por uma web mais rápida: técnicas de otimização de Sites](https://cdn.slidesharecdn.com/ss_thumbnails/otimizacoesclientside-qcon2011-sergio-110910194248-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
![[FrontInBH 2012] Por uma web mais rápida: técnicas de otimizações de sites - ...](https://cdn.slidesharecdn.com/ss_thumbnails/otimizacoesclientside-frontinbh2012-sergio-120713204920-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
- 1. ALL YOU NEED TOKNOW ABOUT JAVASCRIPTLOADING AND EXECUTION IN THE BROWSER <SCRIPT language="JavaScript"> //<![CDATA[ alert(' '); //]]> </SCRIPT>
- 2.
- 3.
- 4.
- 5.
- 6. HOW BROWSERS LOAD ANDEXECUTE JS
- 7.
- 10. HOW BROWSERS LOAD ANDEXECUTE JS
- 11.
- 12.
- 16.
- 17. JS BLOCKS RENDERING NETWORKLATENCY PARSING TIME EXECUTION TIME AVAILABILITY (SPOF)
- 18. PUT JS ATBOTTOM
- 19.
- 20.
- 21.
- 22.
- 23. <html> <head> <script src="main.js" defer></script> <scriptsrc="other.js" defer></script> </head> <body> ... </body> </html>
- 24. PUT JS ATBOTTOM PLUS: NO NEED FOR $(document).ready(..) ANYMORE
- 25.
- 26. <script src="jquery.js"></script> <script src="jquery.plugin.js"></script> <scriptsrc="application.js"></script> ...
- 28.
- 29.
- 30. SCRIPT CONCATENATION 1 SCRIPT?2 SCRIPTs?
- 31.
- 33.
- 34. var js =document.createElement('script'); js.src = 'script.js'; document.head.appendChild(js);
- 35. <script src="main.js" async></script> <scriptsrc="other.js" async></script>
- 36. <html> <head> <script src="main.js" async></script> <scriptsrc="other.js" async></script> </head> <body> </body> </html>
- 37.
- 38.
- 39.
- 40.
- 41.
- 42. <script src="main.js"></script> /* alert('Everything commentedout'); ... */ 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.
- 51.
- 52.
- 53.
- 54. <script> /* inline ~2KBdo LABjs */ </script> <script> $LAB.script('jquery.js').wait() .script('plugin1.js') .script('plugin2.js') .script('plugin3.js').wait() .script('application.js'); </script>
- 55.
- 56.
- 57.
- 58. <link rel="subresource prefetch"href="scri
- 59.
- 60. <script src="script1.js" async></script> <scriptsrc="script2.js" async></script> <script src="script3.js" async></script>
- 61.
- 62.
- 63. <script src="script1.js"></script> <script src="script2.js"></script> <scriptsrc="script3.js"></script> <script src="script4.js"></script> <script src="script5.js"></script>
- 64. AMD ASYNCHRONOUS MODULE DEFINITION *OR SOMETHING SIMILAR
- 65.
- 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.
- 71.
- 72.
- 73.
- 74.
- 75.
- 76. <script src="require.js" data-main= "myapp"></script> myapp.js mymodel.jsmycontroller.js util.js plugin1.js plugin2.js
- 77. <script src="require.js" data-main= "myapp"></script> myapp.js mymodel.jsmycontroller.js jquery.js util.js plugin1.js plugin2.js
- 78.
- 79.
- 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.jsplugin1.js plugin2.js all.js almond.js
- 82. myapp.js mymodel.js mycontroller.js jquery.js util.js plugin1.jsplugin2.js almond.js base.js mypage.js <script src="base.js"></script> <script src="mypage.js"></script>
- 83. <script>/* 250b AMDdefine */</script> <script src="base.js" async></script> <script src="modules.js" async></script> <script src="more.js" async></script>
- 84.
- 85. TEST: 200 JSmodules,~13KB each #1 200 .js files + 1 HTML file <script async> HTTP
- 87. TEST: 200 JSmodules,~13KB each #2 1 .js file + 1 HTML file <script async> HTTP
- 89. TEST: 200 JSmodules,~13KB each #3 200 .js files + 1 HTML file <script async> SPDY
- 91. 200 files 1 file 012500 25000 37500 50000 HTTP:
- 92. 200 files 1 file 200files 1 file 0 12500 25000 37500 50000 HTTP: SPDY:
- 93. SPDY & HTTP2.0
- 94.
- 95. module utils { varlocal = 0; export var exposed = "Public API"; } Modules
- 96. Modules module main { importexposed from utils; console.log(exposed); }
- 97.
- 98. <script> defer async SCRIPT LOADERS prefetch /subresource AMD require.js / r.js / almond SPDY & HTTP 2 ES-HARMONY MODULES *
- 99. ALL YOU NEED TOKNOW ABOUT JAVASCRIPTLOADING AND EXECUTION IN THE BROWSER <SCRIPT language="JavaScript"> //<![CDATA[ alert(' '); //]]> </SCRIPT>
- 100.