Browser resource caching policy

Browser caching can be broadly divided into four areas

  • Memory Cache (Disk Cache)
  • Service Worker Cache
  • HTTP Cache
  • Push Cache

HTTP Cache

  • Browsers check for local strong cache hits before requesting resources.
  • Strong caching comes in two types: Expires and cache-control.
  • If a strong cache is hit, it is fetched from various caches, such as the memory cache or disk cache.
  • If there is no match, the server requests resources.

So the priority is strong cache > negotiation cache > source server fetch

HTTP caches are divided into strong and negotiated caches. Strong caches are controlled using attributes like Expires and cache-control

Strong cache

expires

Expires was first proposed in HTTP/1.0. The main idea is that the server sets an expiration time, and then the browser compares the local time with expires to determine whether a resource has expired or needs to be requested from the server.

expires: Wed, 11 Sep 2019 16:12:18 GMT

Copy the code

Disadvantages: Expires is compared based on the browser’s local time. If you manually change the local time, the resource cache will fail a strong cache hit and the resource will be retrieved

Cache-Control

Cache-control was proposed by HTTP/1.1 as a comprehensive expires replacement. It sets different attributes to cache-control to determine resource caching

Its property values are

  • No-cache: Data content cannot be cached by the browser. Every time a request is made, the server is revisited to check whether the request is expired (negotiated cache). If max-age exists, the server is not accessed during the cache.
  • No-store: the browser, server, and proxy server cannot be cached.
  • Private (default): Cache only in the browser. The server is accessed only on the first request. If max-age exists, the server is not accessed during cache.
  • Public: can be cached by any cache, such as browser, server, proxy server, etc
  • Max-age: indicates the relative expiration time of the cache in seconds.
  • S-max-age: similar to max-age, s-max-age is used preferentially when both exist at the same time. It is used only on the proxy server and is valid only to public
  • No-cache, private: re-accesses the server when a new window is opened. If max-age is set, the server is not accessed during the cache.
  • Private, positive max-age: the server is not accessed while backing up
  • No-cache, positive max-age: access to the server when backing up
cache-control: max-age=3600, s-maxage=31536000
Copy the code

If only max-age is set, the default mode is public and the mode can be fully cached

Negotiate the cache

Negotiation cache is a communication between the browser and the server. The browser asks the server for information to determine whether the local file has expired and whether it needs to retrieve resources from the server. If the resources have Not changed, they are redirected to the browser with a Status Code of 304 Not Modified

So how does a negotiated cache cache work?

  • Last-modified and ETag are used

Last-Modified

When cache-Control is no-cahCE, last-Modified and ETag are added to the response header, and last-Modified is a timestamp.

If-Modified-Since
If-Modified-Since
Last-Modified

  • If the file is modified but the content is not modified, the modification time of the file will also change. If the verification is triggered, a re-request for the resource will be triggered
  • Since both last-Modified and if-Modified-since are set using timestamps, as long as the modification is saved fast enough to complete the change within 100ms, the timestamp will not change, so that the change cannot be checked during verification and no new resource is requested.

ETag also emerged as a last-Modified enhancement and complement to solve this problem

ETag

ETag is an identifier string that is generated by the server for a resource as a last-Modified enhancement and complement. It works in a similar way to last-Modified. ETag is generated in the response header of the resource, and if-none-match is generated in the request header of subsequent requests. If last-Modified exists at the same time as ETag, the ETag is determined first

(Addition to ETag and last-Modified)

Apache returns both by default when last-Modified (ETag is configurable) is configured under Nginx

So the question is whether ETag as last-Modified reinforcement and complement if only ETag would also trigger the interaction? The result: ETag can be used alone for resource determination with the server

HTTP Caching Guide

What should be the Settings for these resources? Let’s take a look at Chrome’s flow chart

cache-control
no-store
cache-control
no-cache
public
private
max-age
Last-Modified
ETag

MemoryCache and DiskCache

MemoryCache: Memory Cache is used first when the server Memory is free and then disk Cache is used later, because Memory Cache is the fastest and most short-lived and will destroy the resource when the browser closes the page, The disk Cache is slower than the Memory Cache, but because it exists on the hard disk, it is the longest and most stable.

Service Worker Cache

From httpCache to memoryCache, let’s take a look at a more unfamiliar service worker cache. The JS code we write is usually run in the main thread and can access DOM and Windows global variables. The Service Worker and Web Worker are JavaScript line layers independent of the main thread because they are designed to be completely asynchronous. So it doesn’t block page rendering and it doesn’t block JavaScript main flow so we can use it to cache offline resources, push messages, etc. At the same time, the Service Worker also has requirements for the protocol, which must be HTTPS, but this is not friendly for our local debugging or development. However, the Service Worker is humanized and can be run under localhost and 127.0.0.1 environment. Github can also execute code. So here we’re going to do a demo

ServiceWorker registration successful with scope:  http://127.0.0.1:8080/
Copy the code

Push Cache

References Principles and practices of front-end performance optimization with Service Worker and cacheStorage caching and offline development