Update a far-future expiring component

May 22nd, 2012. Tagged: performance

NOTE: This is late night mumbling from a week or two ago, leaving here for posterity. Don't read it. Meanwhile Steve wrote up a proper blog post which is highly recommended: Self-updating scripts. Read his post instead!

tl;dr: Load the component in an iframe, then reload()


Backstory

Steve Souders and I were chatting last week about his blog post and he was expressing his disappointment with the status quo of the short expiration time of those omnipresent third party scripts like the Facebook SDK (which loads Like button among others). We need short expiration on those because we need to be able to push quick fixes to critical bugs. And we cannot ask webmasters to keep up with versioned file names.

So the question is how do you set far-future Expires header of a static URL (like http://connect.facebook.net/en_US/all.js) and at the same time be able to update the content of this file without changing its filename.

Ahaa!

Today I had this sudden moment of clarity that we can use location.reload() of an iframe that contains the resource in question.

Sudden clarity

reload(true) forces uncoditional GETs.
reload(false) (default) sends coditional GETs.

So I can load the component in an iframe and then reload() the iframe. Cross-origin restrictions kick in when the static resource is on a CDN domain. This can be solved by loading an HTML page in an iframe and reloading it. All resources referred to by this page will be revalidated with a conditional GET.

Codeh

Far-future expiring component with a static URL:

<img src="http://stevesouders.com/images/book-84x110.jpg">

Version-checking iframe:

<iframe id="i" src="about:blank"></iframe>

Test-links:

<p><a href="javascript:loadit()">load image in iframe</a>
<p><a href="javascript:reloadit()">reload the image in the iframe</a>

And the JS code:

// load the version-checking html
function loadit() {
  document.getElementById('i').src = 'versioncheck.html';
}
 
// reload iframe
function reloadit() {
  window.frames[0].location.reload(false);
}

This is it. Here's the test page.

The versioncheck.html does nothing but include the static resource. Here it is.

Results

Safari, IE9, FF, Chrome are all consistent - when you reload() the versioncheck.html, conditional GETs go out to the HTML and all the resources in it. Then the server can reply 304 if the static resource hasn't changed. Or send a new file if the contents has changed.

Not entirely trusting the browser tools, also validated the 200 and 304 responses tailing the access log file on the server.

Conclusion

Plus: you can update the content of static URL with far-future Expires fairly easily.

Minus:
1. Additional 304s. Two if CDN domain is different than the page, 1 otherwise.
2. The users sees the updated resource on the next page view, sorta like App Cache

So for those omnipresent third party JavaScripts... They currently have short expiration times - between 20 mins and 2 hours. In that time if the user needs the script again, no requests go out.

But if you use the technique outlined, you can set their Expires header to 10 years in the future and for every single page view make two more conditional requests with likely a 304 Not Modified response. These extra requests, of course will not interfere with the user experience, because they will be lazy.

So you get faster user experience with more HTTP requests and delayed-till-next-page-view update.

Tell your friends about this post: Facebook, Twitter, Google+

19 Responses

  1. The problem we see is with intermediate proxies caching content and never checking upstream. The most common proxy with this problem appears to be bluecat. We’ve got clients still making requests from a JavaScript file we pushed out on Feb 1 with an expiry of 7 days.

  2. I think you defeat the purpose of the cache header! Also proxies won’t probably won’t like it…

  3. Woω, that’s what I was exploring for, what a stuff! present here at this weblog, thanks admin of this web page.

    My web-site; jetshare5.livejournal.com

  4. Nice article. Additionally, what’s the name of this blog skin?

  5. What’s up, just wanted to say, I enjoyed this post. It was inspiring. Keep on posting!

    my blog: http://Www.Iprofile.Fr

  6. What’s up friends, its fantastic piece of writing about teachingand entirely defined, keep it up all the time.

  7. I’m extremely impressed with your writing talents as neatly as with the format
    to your blog. Is this a paid subject or did you modify it your self?

    Either way keep up the excellent quality writing, it is uncommon to see a great weblog like
    this one these days..

  8. I read this article completely concerning the comparison of latest and preceding technologies, it’s awesome article.

  9. Thank you, I’ve recently been looking for info approximately this subject for ages and yours is the best I have
    found out till now. However, what concerning
    the bottom line? Are you positive about the source?

  10. Fine way of telling, and nice post to obtain information concerning my presentation subject,
    which i am going to convey in institution of
    higher education.

  11. I have been surfing online more than 4 hours today, yet I never found any interesting article like
    yours. It’s pretty worth enough for me. In my view, if
    all website owners and bloggers made good content as you did, the web will be a lot more useful than ever before.

  12. eddying  edemata  edgiest  edgings  edibles  edictal  edifice  edified.
    hurls    hurly    hurry    hurst    hurts    husks    husky  
     hussy. ——————————————————————————– 67.

  13. This is the motive why i – Phone apps development and i – Phone
    game development gathers the momentum of such gravity. Users can
    easily send messages to their beloved ones that can efficiently
    update their Twitter or Facebook accounts while not having computers anywhere around
    them. Look, there’s a great deal of profit’s to be made in owning your personal application as well as the reason individuals refrain from it’s usually given that they
    believe it’s too difficult to start. At 2005, RIM published 8700 seris and became the model
    of morden Black – Berry phones.

  14. I am curious to find out what blog platform you
    have been utilizing? I’m having some minor security problems with
    my latest site and I would like to find something more
    safeguarded. Do you have any suggestions?

  15. Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point.
    You obviously know what youre talking about, why waste your intelligence on just posting videos
    to your site when you could be giving us something enlightening
    to read?

  16. Hi! Quick question that’s entirely off topic. Do you know how to make
    your site mobile friendly? My blog looks weird when browsing from my
    iphone 4. I’m trying to find a theme or plugin that might be able to
    fix this issue. If you have any suggestions,
    please share. Cheers!

  17. Hiya very cool web site!! Man .. Beautiful .. Superb ..
    I will bookmark your blog and take the feeds additionally?
    I am happy to search out a lot of useful info right here within the post,
    we want develop more techniques in this regard,
    thank you for sharing. . . . . .

  18. Context: The previous version of speed shrine buff
    allowed for people ganking bot lane to come in at basically Ghost movement speeds, with the gankee having very little reaction time on a wardless map.
    With the increased Health and Cooldown Reduction you will be able
    to spam all of these abilities with the use of Mantra as well.
    Thus, each champion has his or her own story on why and how he or she has entered
    the league.

  19. Hope you all enjoyed reading this and hopefully it has
    helped your gameplay. There’s only a single strategy to grow to be a 2000+
    rated participant in League of Legends – get far better. We would have done a lot better
    though if Arsene had listened to me and hired me as a Transfer
    Market consultant at the Emirates; comon.

Leave a Reply