• Save
Improving 3rd Party Script Performance With IFrames
Upcoming SlideShare
Loading in...5
×
 

Improving 3rd Party Script Performance With IFrames

on

  • 7,160 views

 

Statistics

Views

Total Views
7,160
Views on SlideShare
6,831
Embed Views
329

Actions

Likes
7
Downloads
8
Comments
2

7 Embeds 329

http://velocityconf.com 227
https://twitter.com 56
http://lanyrd.com 36
http://eventifier.co 4
http://www.tcsion.com 2
http://tcsion.com 2
https://www.google.com 2
More...

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

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…
  • @7mary4 Thanks Ted, I'll add that to the blog post.
    Are you sure you want to
    Your message goes here
    Processing…
  • Please place title='' and role='presentation' on your javascript iframes. This will keep screen readers from announcing the iframe. Think of it like placing alt='' on a decorative image.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Improving 3rd Party Script Performance With IFrames Improving 3rd Party Script Performance With IFrames Presentation Transcript

  • Improving 3rd Party Script Performance with<IFRAME>sPhilip Tellis / philip@bluesmoon.infoVelocity 2013 / 2013-06-20Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 1
  • • Philip Tellis• @bluesmoon• philip@bluesmoon.info• SOASTAVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 2
  • Do you use JavaScript?Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 3
  • <script src="..."></script>Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 4
  • <script src>• Works well with browser lookahead• But blocks everything• Yes, you can use async or deferVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 5
  • Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 6
  • Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 7
  • document.createElement("script");Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 8
  • dynamic script node1 Loads in parallel with the rest of the page2 Still blocks the onload event3 No telling when it will load upVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 9
  • The Method Queue PatternVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 10
  • MQPvar _mq = _mq || [];var s = document.createElement("script"),t = document.getElementsByTagName("script")[0];s.src="http://some.site.com/script.js";t.parentNode.insertBefore(s, t);// script.js will be available some time in the// future, but we can call its methods_mq.push(["method1", list, of, params]);_mq.push(["method2", other, params]);Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 11
  • MQPvar self = this;_mq = _mq || [];while(_mq.length) {// remove the first item from the queuevar params = _mq.shift();// remove the method from the first itemvar method = params.shift();self[method].apply(self, params);}_mq.push = function(params) {// remove the method from the first itemvar method = params.shift();self[method].apply(self, params);}Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 12
  • That takes care of #3Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 13
  • But we still block onloadVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 14
  • IFRAMEs to the rescueVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 15
  • But IFRAMEs block onload until the subpage hasloadedVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 16
  • (This sub-page intentionally left blank)Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 17
  • So here’s the code – Section I// Section 1 - Create the iframevar dom,doc,where,iframe = document.createElement("iframe");iframe.src = "javascript:false";(iframe.frameElement || iframe).style.cssText ="width: 0; height: 0; border: 0";where = document.getElementsByTagName("script");where = where[where.length - 1];where.parentNode.insertBefore(iframe, where);Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 18
  • javascript:false is key to solving mostcross-domain issuesAsk me about about:blankVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 19
  • Except if the page developer setsdocument.domainVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 20
  • Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 21
  • The code – Section II// Section 2 - handle document.domaintry {doc = iframe.contentWindow.document;}catch(e) {dom = document.domain;iframe.src ="javascript:var d=document.open();" +"d.domain=’" + dom + "’;" +"void(0);";doc = iframe.contentWindow.document;}Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 22
  • Only set document.domain if it has alreadybeen set!Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 23
  • The code – Section III// Section 3 - tell the iframe to load our scriptdoc.open()._l = function() {var js = this.createElement("script");if(dom)this.domain = dom;js.id = "js-iframe-async";js.src = script_url;this.body.appendChild(js);};doc.write(’<body onload="document._l();">’);doc.close();Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 24
  • Notice that we’ve set document.domain againVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 25
  • Inside this function, document is the parentdocument and this is the iframe!Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 26
  • Also, global variables inside _l() are global to theparent windowVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 27
  • Modify the MQP for IFRAME supportGLOBAL = window;// Running in an iframe, and our script node’s// id is js-iframe-asyncif(window.parent != window &&document.getElementById("js-iframe-async")) {GLOBAL = window.parent;}GLOBAL._mq = GLOBAL._mq || [];_mq = GLOBAL._mq;Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 28
  • GLOBAL refers to the parent window and windowrefers to the iframeVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 29
  • So attach events to GLOBALVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 30
  • Summary• Create an iframe with src set to javascript:false• Set document.domain if needed (twice)• Write dynamic script node into iframe on iframe’s onloadevent• Alias parent window into iframeVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 31
  • Result: Happy CustomersVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 32
  • Read all about it• http://lognormal.com/blog/2012/12/12/the-script-loader-pattern/• https://www.w3.org/Bugs/Public/show_bug.cgi?id=21074Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 33
  • Cache busting with a far-future expires headerVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 34
  • Some more code...Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 35
  • location.reload(true);Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 36
  • More completely<script src="SCRIPT.js"></script><script>var reqd_ver = location.search;window.onload = function() {var ver = SCRIPT.version;if (ver < reqd_ver) {location.reload(true);}};</script>The condition protects us from an infinite loop with bad proxiesand Firefox 3.5.11Note: Don’t use location.hash – it messes with history on IE8.Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 37
  • And the blog post...http://www.lognormal.com/blog/2012/06/17/more-on-updating-boomerang/Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 38
  • Join us right after this guy...Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 39
  • Revolutionary RUM1 Combine 1oz Cane Rum, 3/4oz Blood Orange Puree, &1/2oz citrus infused syrup in a mixing glass2 Add ice and shake vigourously3 Strain into a chilled cocktail glass4 Top with lime-mint foam17:45, Evolution Café + Bar, Hyatt LobbyVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 40
  • • Philip Tellis• @bluesmoon• philip@bluesmoon.info• www.SOASTA.com• boomerang• LogNormal BlogVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 41
  • Image Credits• Stop Hammertime by Rich Andersonhttp://www.flickr.com/photos/memestate/54408373/• Nicholas Zakas by Ben Almanhttp://www.flickr.com/photos/rj3/5635837522/Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 42