This article was first published on my personal blog Orxing. top

Recently I wrote a navigation site for the public, and I have been modifying JS and CSS at the beginning. Since it is hosted on coding, the browser cache problem is really deadly. I know how to clear the cache, but others do not, so I checked the solution on the Internet, and here is a summary

preface

The browser cache mechanism is actually a good optimization mechanism, can avoid repeated requests for the same resources, reduce the pressure on the server, but also can speed up the user’s second read. However, there are pros and cons to everything. The presence of caches can cause CSS, JS and other static resources to fail to be updated in a timely manner. Sometimes when YOU modify the HTML, the HTML will not read the cache, but CSS and JS will read the cache, there will be some inexplicable problems, and the user side will be confused.

Caching in browsers

I don’t know much about that either, but there’s forced caching and negotiated caching. When a web page is opened twice, the browser will first make an HTTP request to the cache. As long as the requested resource exists in the cache and the flag of the cache exists in the request header expires and cache-Control of the resource, the cache will be read by default. If the cache expires but still exists, an HTTP request will be made to the server. Last-modified and ETAG headers verify the presence of a negotiated cache, and the browser reads the cache anyway.

Of course, if you don’t already have the resource or explicitly forbid caching, the browser won’t be able to use caching, which is a solution to the caching problem

Mandatory cache

Forced caching of two headers, Expires and cache-control expires, is not much use. It is a header introduced in HTTP1.0 that indicates when a resource expires. Cache-control appears in HTTP / 1.1 and takes precedence over Expires. Cache-control can also be used to indicate resource expiration time. Of course, cache-control is not that simple. There are many values, but the most common ones are the following five

  • Public: All content will be cached (both client and proxy can be cached)
  • Private: All content can be cached only by the client. The default value of cache-control
  • No-cache: indicates the contents of the client cache, but whether to use the cache is verified by the negotiated cache
  • No-store: All content is not cached, that is, neither mandatory cache nor negotiated cache is used
  • Max-age = XXX (XXX is numeric) : The cache contents will expire after XXX seconds

from memory cache
from disk cache

Negotiate the cache

If the cache fails, the browser requests the server. If the server thinks it is ok to use the cache and the resource has not been updated, the browser will still read the cache even if the cache expires. The server returns 304. How do you determine whether a resource is updated, by last-Modified and eTAG headers, which I won’t go into here

But be aware that the forced cache takes precedence over the negotiated cache, so even if you update it, the browser will still read the cache, and that’s where the problem comes from. The solution is very simple, either you just disable the cache, tell the browser not to use my cache, and load it from the server every time. Or if you change the file name, the cache name doesn’t match and it won’t read the cache

The solution

Zhihu has a good answer

Browsers are meta, browsers are a little bit bad, browsers are pissed at you, I’m going to cheat you (MD5)

The meta cache header is set to disable caching

To disable the browser from reading the cache, add the following to the HTML head tag

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
Copy the code

Cache-control on HTTP1.1 Pragma on HTTP1.0 Expires on Proxies

However, the browser can not load the cache when the resource is not modified, which can affect the experience

Js and CSS plus the version number

When requesting JS/CSS, append the version number to the end of the request. If the browser finds that the version is higher, it will not read the cache of the lower version. V equals 1.0, for example

custom.css? V = 1.0 main. Js? V = 2.0Copy the code

Version number, of course, also can automatically add random number, but it has violated the original intention of the version number, so that the same browser cannot load when resources didn’t modify the cache, affect experience random version number add methods, the use of a random function can, of course, so it is only through a write js calls in js statements, for example

document.write( "  + Math.random() + " '></s " + " cript> " )
Copy the code

Or is it

var  js = document.createElement( " script " )
js.src = " test.js" + "? v=" + Math.random()
document.body.appendChild(js)
Copy the code

Add the MD5

MD5 is equivalent to the ID number of a file, and the MD5 of each file is different. If a file is modified, the MD5 is also different. Therefore, we can use MD5 to determine whether the resource is modified. Of course, it is impossible for us to add one by one. It must be a matter of the server. We will not say more here

supplement

Add points to clean up the browser cache and solve the CDN cache, whatever your problems are. Try clearing the cache

Quickly clean up the browser cache

For those of you who don’t know how to quickly clean your browser cache, here’s how to do it for Chrome only

  • Ctrl+F5 / Ctrl+Shift+R You probably know that F5 is refresh, but Ctrl+R is refresh, Ctrl+F5 / Ctrl+Shift+R is refreshDo not load the cache and refreshWhen you long press the refresh button with the left mouse button, the following options will appear and work the same way. The last one isClear the cache and refresh
  • Ctrl+ Shift +Del Clears browser data, cookies, and caches. This clears all browser caches
  • Console disable cache this hidden in the console network option, good for developers, the default disable cache

CDN cache

In order to speed up the loading of the website, I put all static resources on the CDN, because it is free CDN, clear cache is not exist, when you modify a file, it may take several hours to take effect, this is very troublesome

The only way is to change the file name

conclusion

Or quote a sentence on Zhihu

The requirement to ban caching completely is wrong. Caching is a browser feature, not a Bug

Yes, caching is important. Banning caching completely is not a good idea. The best way to do this is to add version numbers

Refer to the link

  • Thoroughly understand the browser caching mechanism
  • Cache (2) – Browser cache mechanism: strong cache, negotiated cache