Improving 3rd Party Script Performance with<IFRAME>sPhilip Tellis / philip@bluesmoon.infoVelocity 2013 / 2013-06-20Velocit...
• Philip Tellis• @bluesmoon• philip@bluesmoon.info• SOASTAVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performanc...
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 / 201...
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 l...
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...
MQPvar self = this;_mq = _mq || [];while(_mq.length) {// remove the first item from the queuevar params = _mq.shift();// r...
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...
(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");...
javascript:false is key to solving mostcross-domain issuesAsk me about about:blankVelocity 2013 / 2013-06-20 Improving 3rd...
Except if the page developer setsdocument.domainVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IF...
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 = docume...
Only set document.domain if it has alreadybeen set!Velocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with ...
The code – Section III// Section 3 - tell the iframe to load our scriptdoc.open()._l = function() {var js = this.createEle...
Notice that we’ve set document.domain againVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRAME>...
Inside this function, document is the parentdocument and this is the iframe!Velocity 2013 / 2013-06-20 Improving 3rd Party...
Also, global variables inside _l() are global to theparent windowVelocity 2013 / 2013-06-20 Improving 3rd Party Script Per...
Modify the MQP for IFRAME supportGLOBAL = window;// Running in an iframe, and our script node’s// id is js-iframe-asyncif(...
GLOBAL refers to the parent window and windowrefers to the iframeVelocity 2013 / 2013-06-20 Improving 3rd Party Script Per...
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 no...
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_bu...
Cache busting with a far-future expires headerVelocity 2013 / 2013-06-20 Improving 3rd Party Script Performance with <IFRA...
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...
And the blog post...http://www.lognormal.com/blog/2012/06/17/more-on-updating-boomerang/Velocity 2013 / 2013-06-20 Improvi...
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 ...
• Philip Tellis• @bluesmoon• philip@bluesmoon.info• www.SOASTA.com• boomerang• LogNormal BlogVelocity 2013 / 2013-06-20 Im...
Image Credits• Stop Hammertime by Rich Andersonhttp://www.flickr.com/photos/memestate/54408373/• Nicholas Zakas by Ben Alma...
Upcoming SlideShare
Loading in...5
×

Improving 3rd Party Script Performance With IFrames

8,646

Published on

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

No notes for slide

Improving 3rd Party Script Performance With IFrames

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

×