I. Browser caching mechanism

1. What is browser caching?

  • The browser caching mechanism is also known as the HTTP caching mechanism
  • The browser initiates a request and searches the browser cache for the result of the request and the corresponding cache flag
  • ① If the request result and cache flag exist and have not expired, the result is returned
  • ② If the corresponding request result and cache flag do not exist or have expired, the request is sent to the browser
  • ③ After receiving the request, the browser processes the request and returns the corresponding request result and cache flag

Note: ① corresponds to strong cache, ②③ corresponds to negotiation cache

2. What problem is the browser caching mechanism designed to solve?

  • The client
    • This reduces the load of resources and saves user traffic
    • Accelerate web page loading speed, improve user experience
  • The server side
    • Reduce server stress and improve site performance

⭐3. Classification of browser caching mechanisms

  • It is divided into strong cache and negotiated cache
    • Strong cache control headers:
      • Cache-control
      • Expired time
    • Negotiation cache control request headers
      • Etag / If-None-Match
      • Last-Modified / If-Modified-Since
  • judge
    • Judge by the request header
  • Strong cache
    • Features:
      • There is no need to send a request to the server
      • The status code is 200
      • The requested data is matched directly from the browser cache
    • How to implement
  • Negotiate the cache
    • Features:
      • A request needs to be sent to the server
      • It corresponds to the 304 status code
      • The requested data is negotiated with the browser to allow caching
    • How to implement

2. Status code

  • category

  • Common status code
    • 2XX
      • 200 OK The client sent the request successfully on the server

      Note: the GET method: the entity requesting the resource is returned as a response; HEAD method: only the request header is returned, not the body of the entity

      • 204 No Content The request was processed successfully but the response does not contain the body of the entity, and the page is not updated

      Typically used when only the client sends a message to the server without the server responding

      • 206 A Partial Client requested Partial resources

      The response message contains the Content of the Range specified by content-range

    • 3XX
      • 301 Moved Permanently Redirected Permanently

      The requested resource has been assigned a new URI and will not be changed

      • 302 Found Temporary redirect

      The resource for this request has been assigned a new URI, but it may change later to prevent the request method from changing from POST to GET

      • 303 See Other Temporary redirection

      The function is the same as 302, but the client is expected to request the resource using the GET method

      • 304 Not Modified conditional request

      The server allows access to the resource, but does not match the condition carried in the request initiated by the client, so does not contain any body part of the response

      • 307 Temporary Redirect Temporary redirection

      It has the same functionality as the 302 and does not change from POST to GET in accordance with browser standards

    • 4XX
      • 400 Bad Required A syntax error exists in the request packet
      • 401 Unauthorized Requests require authentication information that is authenticated through HTTP

      If a request is made before, the user authentication fails

      • 403 ForBidden The server rejects the request
      • 404 Not Found The requested resource was Not Found on the server
    • 5XX
      • 500 Internal Server Error An Error occurred when the Server executed the request
      • 503 Server Unavailable The Server is temporarily overloaded or is down for repairs and cannot process requests at this time