Simple Cache Busting for CSS and JS

 If you update your site’s CSS or JS it is a good idea to force browsers to download the latest version. If you don’t then your visitor’s browser may well load a cached version of the CSS or JS which can result in broken pages. Busting the cache is also really convenient when you are pushing out changes for review (you won’t have to ask your reviewers to refresh or clear their cache to see the changes). One simple way I like to do this by appending a query string to the link.

If you’re referencing the linked file in a server-side include (like a head.php include, for example) this technique allows you to make one small edit and avoid renaming any files.

Just place a query string at the end of the link. Put anything you want in the string, but some suggestions would be a timestamp or a version number:

<link rel="stylesheet" href="/css/example.css?v1.0" type="text/css" />

Then when you update the CSS file and want to make sure a visitor’s browser pulls down the latest changes just manually increment the querystring and you’re all set. In this example v1.0 changes to v1.1.

<link rel="stylesheet" href="/css/example.css?v1.1" type="text/css" />

2 Bình luận

  1. sua may lanh tai binh duong nói:

    rat hay

  2. sua may lanh tai binh duong nói:

    Rat tuyet voi

Trở về
  • HTML5 Canvas
  • HTML5 Canvas

     The <canvas> element is used to draw graphics, on the fly, on a web page. Draw a red rectangle, a gradient rectangle,...