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,449 views

Published on

  • Be the first to comment

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

×