13

On websites I make I usually invalidate the cache of CSS and JS using query-string params, like so:

Image

Note: this is a screenshot from the chrome inspector, these query-strings are all appended automatically by a little system I made when being rendered into the browser.

A friend now told me that using the query-string doesn't cache as good as changing the filename itself or somewhere in the path before the filename. He also sent an article along with it and here they're mainly talking about bad performance when people use proxies.

However, the article is 8 years old. I wonder, is it still a valid point? Should I care? Is it really a bad practice?

Dale K
  • 25,246
  • 15
  • 42
  • 71
wouterds
  • 881
  • 10
  • 26
  • Why do you have files with `?v=1.1.0-alpha`? – Justinas May 13 '16 at 07:54
  • 1
    @Justinas that's how you invalidate cache you add new version to query string and the file will not be taken from cache but from the net. – jcubic May 13 '16 at 07:56
  • @jcubic actually you make file name like `header.js` and only append chache invalidation to links. OP shows that all files are named with `?v=1.1.0-alpha` as (?) extension – Justinas May 13 '16 at 07:57
  • @Justinas it's not an extension try this in your browser `data:text/html,` you will see file `jquery-1.11.3.min.js?v=1.11.3` – jcubic May 13 '16 at 08:00

3 Answers3

5

It's true that query string cache invalidation is not exactly best practice. There are cases where it doesn't work... some browsers (supposedly), and your CDN might be set up to ignore the query string (serve the same file). But this doesn't mean it's not effective for development workflows or as a quick fix that scratches the itch.

Some folks feel strongly that query strings are not good enough. For a professional site (especially with continuous integration) you should use filenames based on last updated date or a hash of file contents.

Links on the topic...

doublejosh
  • 5,548
  • 4
  • 39
  • 45
  • 2
    "query string cache invalidation is not exactly best practice."? Are there any experts that discourage this practice? Google, Amazon and most CDN have a section on how to do this on their website. – cquezel Oct 23 '20 at 15:35
  • 1
    “There are cases where it doesn’t work”. Where? “some browsers (supposedly) ” Which ones? The only issue I could find was that the Squid Cache (not a browser) was configured to not cache dynamic content by default. This default was changed (fixed) in 2008. – cquezel Oct 23 '20 at 15:36
  • 3
    If this is not suggested for production use! You should advise stackoverflow.com. if you view this page’s source you will see : – cquezel Oct 23 '20 at 15:36
0

Using the query string to invalidate cache is perfectly fine. As I have pointed out in comments:

  1. There is no authority that states that this is wrong.
  2. Google, Amazon and most CDN have a section on how to do this on their website. For example: https://cloud.google.com/cdn/docs/cache-invalidation-overview
  3. This site (stackOverflow) uses this technique. If you view this page’s source you will see : <link rel="shortcut icon" href="...favicon.ico?v=ec617d715196">

The only issue I could find was that the Squid Cache (not a browser) was configured to not cache dynamic content by default. This default was changed (fixed) in 2008.

see: Cache busting via params

cquezel
  • 3,859
  • 1
  • 30
  • 32
-2

If you are currently developing your site, than you will really make use of random query string appended to resources links. Like <a href="header.js?noCache=<?= time(); ?>">

But you have stated, that this is working for 8 years, so maybe it's good to have some resources cached?

And yes, non-cached version will work slower than cached.

Justinas
  • 41,402
  • 5
  • 66
  • 96
  • I updated the original post, the 8 years is about the article. It's 8 years old and I wonder if the guy still has a valid point. I've been using query-strings for a long time and personally never had issues. – wouterds May 13 '16 at 08:03
  • This answer removes the cache altogether. The querystring value should be changed only when there are changes to the file, header.js in this case.. – Mattias Örtenblad Jan 24 '19 at 12:43
  • I sometimes use a similar technique, but use the `filemtime` of the file, instead of just `time`. It's computationally not optimal, but a simple read of file attributes should be negligible in many use cases and simple websites. – oelna Jun 29 '20 at 09:47