Your SlideShare is downloading. ×
Improving 3rd Party Script Performance With IFrames
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Improving 3rd Party Script Performance With IFrames

8,343
views

Published on


2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
8,343
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
8
Comments
2
Likes
8
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 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
  • 2. • Philip Tellis• @bluesmoon• philip@bluesmoon.info• SOASTAVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 2
  • 3. Do you use JavaScript?Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 3
  • 4. <script src="..."></script>Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 4
  • 5. <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
  • 6. Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 6
  • 7. Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 7
  • 8. document.createElement("script");Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 8
  • 9. 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
  • 10. The Method Queue PatternVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 10
  • 11. 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
  • 12. 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
  • 13. That takes care of #3Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 13
  • 14. But we still block onloadVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 14
  • 15. IFRAMEs to the rescueVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 15
  • 16. But IFRAMEs block onload until the subpage hasloadedVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 16
  • 17. (This sub-page intentionally left blank)Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 17
  • 18. 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
  • 19. 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
  • 20. Except if the page developer setsdocument.domainVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 20
  • 21. Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 21
  • 22. 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
  • 23. Only set document.domain if it has alreadybeen set!Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 23
  • 24. 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
  • 25. Notice that we’ve set document.domain againVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 25
  • 26. 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
  • 27. Also, global variables inside _l() are global to theparent windowVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 27
  • 28. 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
  • 29. GLOBAL refers to the parent window and windowrefers to the iframeVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 29
  • 30. So attach events to GLOBALVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 30
  • 31. 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
  • 32. Result: Happy CustomersVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 32
  • 33. 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
  • 34. Cache busting with a far-future expires headerVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 34
  • 35. Some more code...Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 35
  • 36. location.reload(true);Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 36
  • 37. 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
  • 38. 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
  • 39. Join us right after this guy...Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>s 39
  • 40. 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
  • 41. • 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
  • 42. 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