• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
JavaScript Dynamic Loading
 

JavaScript Dynamic Loading

on

  • 1,279 views

 

Statistics

Views

Total Views
1,279
Views on SlideShare
1,279
Embed Views
0

Actions

Likes
3
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 JavaScript Dynamic Loading Presentation Transcript

  • 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”></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>
  • <html> <head> <script src=”loader.js”></script> <script> document.onload = function() { /* do loading */ }; </script> </head></html>
  • How
  • XHR + evalvar xhrObj = new XMLHttpRequest();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { eval(xhrObj.responseText); } };xhrObj.open(GET, A.js, true);xhrObj.send();
  • 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();
  • 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);
  • 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);
  • XHRvar xhrObj = new XMLHttpRequest();xhrObj.onreadystatechange = function() { if ( xhrObj.readyState == 4 ) { /* eval or injection */ /* JavaScript onload */ } };xhrObj.open(GET, A.js, true);xhrObj.send();
  • dom elementvar scriptElem = document.createElement(script);scriptElem.src = http://anydomain.com/A.js;scriptElem.onload = function() { /* JavaScript onload */ };document.getElementsByTagName(head).appendChild(scriptElem);
  • 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);
  • When / What
  • The three things you should know
  • 1
  • 2
  • 3
  • UI
  • Points
  • One more thing ...
  • Thunk you