JavaScript Dynamic Loading
Response Time
0                0.1                 1Jakob Nielsen   10
0                0.1                 1Jakob Nielsen   10
Huge JavaScript
91%
75%
Heavy loading   Quick response
JavaScript Dynamic Loading
JavaScript
<html> <body>    :  <script src=”jQuery.js”></script>  <script src=”jq-plugin-x.js”></script>  <script src=”jq-plugin-y.js...
<html> <head>  <script src=”loader.js”></script>  <script>     document.onload = function() {       /* do loading */     }...
How
XHR + evalvar xhrObj = new XMLHttpRequest();xhrObj.onreadystatechange = function() {   if ( xhrObj.readyState == 4 ) {    ...
XHR + injectionvar xhrObj = new XMLHttpRequest();xhrObj.onreadystatechange = function() {   if ( xhrObj.readyState == 4 ) ...
dom elementvar scriptElem = document.createElement(script);scriptElem.type= text/javascript;scriptElem.src = http://anydom...
dom element (not execute)var scriptElem = document.createElement(script);scriptElem.type= text/html;scriptElem.src = http:...
XHRvar xhrObj = new XMLHttpRequest();xhrObj.onreadystatechange = function() {   if ( xhrObj.readyState == 4 ) {     /* eva...
dom elementvar scriptElem = document.createElement(script);scriptElem.src = http://anydomain.com/A.js;scriptElem.onload = ...
with IE :)var scriptElem = document.createElement(script);scriptElem.src = http://anydomain.com/A.js;scriptElem.onload = f...
When / What
The three things you should know
1
2
3
UI
Points
One more thing ...
Thunk you
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
JavaScript Dynamic Loading
Upcoming SlideShare
Loading in …5
×

JavaScript Dynamic Loading

1,426 views

Published on

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,426
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
14
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • JavaScript Dynamic Loading

    1. 1. JavaScript Dynamic Loading
    2. 2. Response Time
    3. 3. 0 0.1 1Jakob Nielsen 10
    4. 4. 0 0.1 1Jakob Nielsen 10
    5. 5. Huge JavaScript
    6. 6. 91%
    7. 7. 75%
    8. 8. Heavy loading Quick response
    9. 9. JavaScript Dynamic Loading
    10. 10. JavaScript
    11. 11. <html> <body> : <script src=”jQuery.js”></script> <script src=”jq-plugin-x.js”></script> <script src=”jq-plugin-y.js”></script> <script src=”prototype.js”></script> <script src=”pt-plugin-x.js”></script> <script src=”pt-plugin-y.js”></script> <script src=”init-rendering.js”> <script src=”facebook-plugin.js”> <script src=”twitter-plugin.js”> </body></html>
    12. 12. <html> <head> <script src=”loader.js”></script> <script> document.onload = function() { /* do loading */ }; </script> </head></html>
    13. 13. How
    14. 14. XHR + evalvar xhrObj = new XMLHttpRequest();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { eval(xhrObj.responseText); } };xhrObj.open(GET, A.js, true);xhrObj.send();
    15. 15. XHR + injectionvar xhrObj = new XMLHttpRequest();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { var scriptElem = document.createElement(script); var headElem = document.getElementsByTagName(head)[0]; headElem.appendChild(scriptElem); scriptElem.text = xhrObj.responseText; } };xhrObj.open(GET, A.js, true);xhrObj.send();
    16. 16. dom elementvar scriptElem = document.createElement(script);scriptElem.type= text/javascript;scriptElem.src = http://anydomain.com/A.js;var headElem = document.getElementsByTagName(head)[0];headElem.appendChild(scriptElem);
    17. 17. dom element (not execute)var scriptElem = document.createElement(script);scriptElem.type= text/html;scriptElem.src = http://anydomain.com/A.js;var headElem = document.getElementsByTagName(head)[0];headElem.appendChild(scriptElem);
    18. 18. XHRvar xhrObj = new XMLHttpRequest();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { /* eval or injection */ /* JavaScript onload */ } };xhrObj.open(GET, A.js, true);xhrObj.send();
    19. 19. dom elementvar scriptElem = document.createElement(script);scriptElem.src = http://anydomain.com/A.js;scriptElem.onload = function() { /* JavaScript onload */ };document.getElementsByTagName(head).appendChild(scriptElem);
    20. 20. with IE :)var scriptElem = document.createElement(script);scriptElem.src = http://anydomain.com/A.js;scriptElem.onload = function() { if ( !scriptElem.onloadDone ) { scriptElem.onloadDone = true; /* JavaScript onload */ }};scriptElem.onreadystatechange = function() { /* for IE */ if ( xhrObj.readyState == 4 || xhrObj.readyState == 2 ) { if ( !scriptElem.onloadDone ) { scriptElem.onloadDone = true; /* JavaScript onload */ } }};document.getElementsByTagName(head).appendChild(scriptElem);
    21. 21. When / What
    22. 22. The three things you should know
    23. 23. 1
    24. 24. 2
    25. 25. 3
    26. 26. UI
    27. 27. Points
    28. 28. One more thing ...
    29. 29. Thunk you

    ×