Improving 3rd Party Script Performance

Improving 3rd Party Script Performance with
<IFRAME>s
Philip Tellis / ptellis@soasta.com

Boston Web Perf / 2013-10-22


Improving 3rd Party Script Performance with <IFRAME>s

1

• Philip Tellis
• @bluesmoon
• philip@bluesmoon.info
• SOASTA



2

1

Loading JavaScript



3

Do you use JavaScript?



4



7

document.createElement("script");



8

dynamic script node

1

Loads in parallel with the rest of the page

2

Still blocks the onload event

3

No telling when it will load up



9

No telling when!



10

The Method Queue Pattern



11

MQP

var _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]);



12

MQP
var self = this;
_mq = _mq || [];
while(_mq.length) {
// remove the first item from the queue
var params = _mq.shift();
// remove the method from the first item
var method = params.shift();
self[method].apply(self, params);
}
_mq.push = function(params) {
// remove the method from the first item
var method = params.shift();
self[method].apply(self, params);
}


13

That takes care of #3



14

But we still block onload



15

IFRAMEs to the rescue



16

But IFRAMEs block onload until the subpage has
loaded



17

(This sub-page intentionally left blank)



18

So here’s the code – Section I
// Section 1 - Create the iframe
var dom,doc,where,
iframe = document.createElement("iframe");
iframe.src = "javascript:false";
iframe.title = ""; iframe.role = "presentation";
(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);
(Note that we set iframe.title and iframe.role to avoid hurting
screenreaders)


19

javascript:false is key to solving most
cross-domain issues

about:blank is problematic on IE6 with SSL



20

Except if the page developer sets
document.domain



21



22

The code – Section II

// Section 2 - handle document.domain
try {
// sec exception if document.domain was set
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;
}



23

Only set document.domain if it has already
been set!



24

The code – Section III

// Section 3 - tell the iframe to load our script
doc.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();



25

Notice that we’ve set document.domain again



26

This doesn’t work if document.domain is set
after our JavaScript loads



27

Inside this function, document is the parent
document and this is the iframe!



28

Also, global variables inside _l() are global to the
parent window



29

Modify the MQP for IFRAME support

GLOBAL = window;
// Running in an iframe, and our script node’s
// id is js-iframe-async
if(window.parent != window &&
document.getElementById("js-iframe-async")) {
GLOBAL = window.parent;
}
GLOBAL._mq = GLOBAL._mq || [];
_mq = GLOBAL._mq;



30

GLOBAL refers to the parent window and window
refers to the iframe



31

So attach events to GLOBAL



32

Summary (part 1)

• Create an iframe with src set to javascript:false
• Set document.domain if needed (twice)
• Write dynamic script node into iframe on iframe’s onload

event
• Alias parent window into iframe



33

Result: Happy Customers



34

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=21074



35

2

Cache Behaviour



36

We have boomerang set to be cached for 7 days
Cache-Control:

max-age=604800,

stale-while-revalidate=60, stale-if-error=3600



37

how soon does a new version get to everyone?



38

hourly on weekends



39

hourly on weekdays



40

This is a problem if we have emergency ﬁxes



41

Cache busting with a far-future expires header



42

Some more code...



43

location.reload(true);



44

More completely
<script src="SCRIPT.js"></script>
<script>
var reqd_ver = location.search;
window.onload = function() {
var ver = SCRIPT.version;
if (ver < reqd_ver) { // or use semver
location.reload(true);
}
};
</script>
The condition protects us from an inﬁnite loop with bad proxies
and Firefox 3.5.11
Note: Don’t use location.hash – it messes with history on IE8.


45

Add this in an iframe after onload using
//url.to/reloader.html?1.2.3



46

reloader.html can be cached forever



47

Other caching quirks

• Some proxies will ignore all cache control headers and

never clear their cache
• Some user agents have broken clocks, so expiry dates

either never occur or always occur
• Some versions of Chrome have a cache corruption bug so

they might start up with an empty cache
• Cache-control headers are honoured by pre-browsing



48

Old but active versions of boomerang



49

And the blog post...

http://www.lognormal.com/blog/2012/06/17/moreon-updating-boomerang/



50

Thank You – Questions?

• Philip Tellis
• @bluesmoon
• philip@bluesmoon.info
• www.SOASTA.com
• boomerang
• LogNormal Blog



51

Image Credits

• Neutraface Blocks! by David Joyce
http://www.flickr.com/photos/deapeajay/3913282801/
• Stop Hammertime by Rich Anderson
http://www.flickr.com/photos/memestate/54408373/
• This Title Intentionally Left Blank by Jonathan Hinkle
http://www.flickr.com/photos/hynkle/4535749633/
• All other images taken at Velocity 2013 by Philip Tellis and
shared under a Creative Commons Attribution-Share Alike
License.



52

Improving 3rd Party Script Performance

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (7)

Mehr von Philip Tellis

Mehr von Philip Tellis (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Improving 3rd Party Script Performance