The paper

  • The browser cache is HTTP cache. The requested data (HTML, CSS, and JS) is stored in the browser (local disk). When the browser accesses these resources again, the requested data can be directly loaded from the local PC, reducing server requests
  • The server determines the caching policy by setting the HTTP response header (caching mode)

Cache processes

  • When the server returns the required resource for the first time, it adds a cache policy in the response Hearder response header to tell the browser the cache rules (such as how to cache, cache information……). At this point, the cache is used
  • If the request is for the same resource the second time, it will check whether there is corresponding resource in the cache. If so, it will be directly used. Please refer to the follow-up for details

The cache location

  • Let’s talk about where caches will exist, and then introduce caches to further explain

Service Worker

  • Gives us freedom to control which files are cached, how the cache is matched/read, and the cache is persistent
  • The offline cache invokes the Service Worker

Memory Cache

  • A cache in memory that invalidates pages when closed

Disk Cache

  • Cache on hard Disk
  • The condition that resources are saved to disk
    • Large file (high probability)
    • In this case, the memory usage is high

Push Cache

  • Push cache: Only enabled when all three caches fail
  • It exists only for sessions, is released at the end of the Session, and has a very short cache time

If none of the above caches is hit, the request must be made. Therefore, for the sake of performance, it is very important to choose a good caching method

Cache way

  • There are two ways to cache
    • Strong cache (default preferred)
    • Negotiation cache (negotiation, which means negotiation)
  • Start with an important value in the response headerCache-ControlIs used to control the web page cache and has the following main values
    • Public: Responses can be cached by clients and proxy servers
    • Private (default value) : The response can be cached only by the client
    • No-cache: Directly enters the negotiation cache phase
    • No-store: no cache is performed
    • Max-age = XXX (XXX represents a number) : indicates that the cache content will be invalid after XXX time, in seconds
    • Must-revalidate: If the cache is invalid, the client can use it only after the verification is correct. In some special cases, the client can use the expired cache, for example, when the verification request fails to be sent
  • Browser to view the response header method (new edge as an example) : right-click “Check”, enter the developer mode, select “Network”, select the specific option (if there is no f5 to refresh the page), click “header”

Strong cache

  • Concept: Check the strong cache and read resources from the cache without sending an HTTP request. Generally, strong caches are set to expire and expire
  • Trigger condition (response header)
    • Expires: A time string (timestamp) in THE GMT format. The server returns the expiration time of the cache for the result of the request, and if the request is sent again, the cache is used directly. The disadvantage is that the local time is used to determine whether the expiration date, and the local time can be modified by itself
    • Canche-control: indicates the highest priority. Set max-age= XXX to replace Expires, which is a relative time that has not expired
    • Pragma: the value is no-cache, which is the same as the cache-control value no-cache

Negotiate the cache

  • Concept: You need to send an HTTP request with a cache tag, and the server decides whether to use the cache. If the resource has changed, the server will return the new resource. Otherwise, it will tell the browser to enable caching
  • Trigger conditions (two)
    • Strong cache expiration
    • The value of cache-control contains no-cache
  • The cache identifier is determined by last-modified/if-modified-since and ETag/ if-none-match headers
    • Last-modified Returns the time when the resource file was Last Modified on the server. When the browser requests it again, if-modified-since carries the Last last-modified value to the server and compares it with the Last Modified time. If the time is less than the Last Modified time of the server, it means that the resource has been changed and the resource is returned with the status code of 200; otherwise, the status code is 304. Represents cache availability
    • ETag returns a unique identifier of the current file (generated by the server). If-none-match carries the ETag value and compares it with the ETag value of the server. If the ETag value is inconsistent, a new resource is returned with status code 200. Otherwise, the cache continues to be used, with a status code of 304

Impact of user operations on cache

  • Enter the url in the address bar: the browser will look in the cache and use it directly
  • Click refresh button or f5 Refresh: cache is used, request header is addedIf-Modify-SinceIf the resource is not expired, the cache is hit. The server returns a 304 status code
  • CTRL + F5 Refresh: skip cache, request new resource directly, request header carriedCache-Control: no-cache, Pragma: no-cachefield