All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
•
22 j'aime•13,576 vues
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)
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (10)
Similaire à All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013
Similaire à All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013 (20)
Plus de Caelum
Plus de Caelum (20)
Dernier
Dernier (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>