directory

  • Strong and negotiated caching
    • Strong cache
      • expires
      • cache control
    • Negotiate the cache
      • last-modified/if-modified-since
      • etag/if-none-match
  • The cache location
    • service worker
    • memory chache
    • disk cache
    • push cache
  • extension
    • Why does eTAG have a higher priority than Last-Modified
    • Cache notes
    • webpack hash
    • service worker

Strong and negotiated caching

  • Strong and negotiated caching is a caching strategy over HTTP
  • Strong caching has two types: cache-control and Expires
  • The strong cache does not send real requests to the server. The status code is 200
  • There are also two types of negotiation cache (last-modified/if-modified-since) and (etag/if-none-match).
  • The negotiation cache is jointly negotiated by the client and the service, and the status code is 304

Strong cache

expires

Expires is an absolute time. You compare server time to browser time, and if there’s a difference between server time and client time, there’s a problem

cache-control

Cache-control is the relative time, which allows more precise control of the cache. It has the following values

  • No-cache checks with the server to see if the number of the returned response has changed. If it has not, the cache is used
  • No -store disallows the use of cache
  • Max-age Indicates the relative time in seconds
  • Private allows only terminal clients to cache, not the middle layer
  • Public allows clients, CDN and other intermediate service layers to cache

Negotiate the cache

last-modified/if-modified-since

  • Last-modified Date when the file was last modified

etag/if-none-match

  • Etag generates a unique value based on the contents of the file
  • Etag has a higher priority than last-Modified

The cache location

service worker

  • A service worker is an event-driven worker registered in a specified source and path. It uses JavaScript to control associated pages or websites, intercept and modify access requests, and cache resources in fine granularity
  • The service worker runs in the worker context and therefore cannot access the DOM
  • The design is completely asynchronous, without XHR and localstorage
  • A service worker is an independent thread independent of the main thread, used for server push, caching and other functions
  • The service worker must be registered first. After the registration is successful, all fetch events under this domain name can be cached
  • HTTPS must be used because request interception is involved in the service worker and we must use HTTPS for security

memory cache

  • Memory cache, stored in memory, is fast to read, small capacity, short duration, and will be released as the process is released

disk cache

  • Storage on hard disk, large capacity, slow read

push cache

Http2 large content, when the above when the cache is dead, will be used, cached for a short time, stored in the session, released at the end of the session

extension

Why does eTAG have a higher priority than Last-Modified

  • Some files may change periodically, but their contents do not change (just change the modification time). At this point, we do not want the client to think that the file has been modified and get again
  • Some files are Modified very frequently, such as If they are Modified less than seconds (say N times in 1s), and if-modified-since is of the s-level granularity that can be checked. This modification cannot be determined (or the UNIX record MTIME is only accurate to seconds).
  • Some servers cannot accurately obtain the last modification time of files

Cache notes

  • Last-modified files must be consistent across multiple machines in a distributed system to avoid load balancing on different machines resulting in failed comparisons.
  • Distributed systems turn off ETAGS as much as possible (eTAGS are generated differently for each machine);

webpack hash

hash

  • The hash changes as long as the project is built

chunkhash

  • In addition, the dependency files of different entry files are analyzed, corresponding chunks are constructed, and corresponding hash values are generated

contenthash

  • Generates hash values based on file contents

conclusion

If the hash value changes every time the file is built, the cache will become invalid. It is generally not used. In a project, we usually pull the CSS out of the project. If we use chunkhash, after modifying the CSS, the JS hash changes. So CSS uses contenthash and JS uses chunkhash

service worker

  • Generate our service-worker script by configuring sw-Precach-webpack-plugin
  • The SWPrecacheWebpackPlugin is a Webpack plug-in for caching external project dependencies using the Service worker. It will use sw-precache to generate the service worker file and add it to your build directory. In order to generate a pre-cached list in the service worker, the plugin must be applied after Assets have been packaged by Webpack
const SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
const plugins = [
 new SWPrecacheWebpackPlugin({
    dontCacheBustUrlsMatching: /\.\w{8}\./,
    filename: 'service-worker.js'.logger(message){... },minify: true.navigateFallback: publicUrl + '/index.html'.navigateFallbackWhitelist: [/ ^ (? ! / / __). * /].staticFileGlobsIgnorePatterns: [/\.map$/./asset-manifest\.json$/],}),... ]Copy the code
  • Registration service worker
navigator.serviceWorker
    .register(swUrl)
    .then(registration= > {
      registration.onupdatefound = () = > {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () = > {
          if (installingWorker.state === 'installed') {... }}; }; }) .catch(error= >{... });Copy the code

reference

  • service worker api
  • The service worker practice