More Related Content Similar to All you need to know about JavaScript loading and execution in the browser - JSConf BR 2013 (20) All you need to know about JavaScript loading and execution in the browser - JSConf BR 20131. ALL YOU NEED
TO KNOW ABOUT
JAVASCRIPTLOADING AND EXECUTION
IN THE BROWSER
<SCRIPT language="JavaScript">
//<![CDATA[
alert('
');
//]]>
</SCRIPT>
24. PUT JS AT BOTTOM
PLUS: NO NEED FOR $(document).ready(..) ANYMORE
34. var js = document.createElement('script');
js.src = 'script.js';
document.head.appendChild(js);
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
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>
83. <script>/* 250b AMD define */</script>
<script src="base.js" async></script>
<script src="modules.js" async></script>
<script src="more.js" async></script>
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
99. ALL YOU NEED
TO KNOW ABOUT
JAVASCRIPTLOADING AND EXECUTION
IN THE BROWSER
<SCRIPT language="JavaScript">
//<![CDATA[
alert('
');
//]]>
</SCRIPT>