Nginx and browser caching

Nginx and browser caching

1. Browser Handling of Cache: Internet Options

  ★ Control request server policy: It means to force additional request server in the case of ignoring the resource cache policy .

    ★ Check for newer versions of stored pages

         1. Every time a webpage is accessed
                , the server will be requested again regardless of whether there is a cache or whether the resource status is expired.
         2. Every time Internet Explorer is started
           , the server will be requested again regardless of whether there is a cache or whether the resource status is expired.
         3. Automatic
                is basically the same as 2, but the strategy for pictures is a little different.
         4. Never
                request the server exactly according to the resource's caching policy.

  F5 refresh : request the server, but will determine whether to download according to the file comparison with the server
  ★ Ctrl + F5 refresh : will definitely go to the server to download.

Second, the cache control strategy

  ★Last-Modified/If-Modified-Since should be used with Cache-Control, and Etag/If-None-Match should also be used with Cache-Control.

    ps: The last-modified of files between multiple machines in the distributed system must be consistent, so as to avoid load balancing to different machines and cause comparison failures. The
       distributed system should try to close the Etag (etag generated by each machine will be different)


  ★HTML controls the browser caching strategy through the http-equiv attribute of meta: controls
    ps by setting Pragma, Cache-control and expires: it can only control the caching strategy of html, but cannot control the caching strategy of css/js/images.

    The max-age and expires of Cache-control exist at the same time, then the max-age is processed first.
    Cache-control specifies no-cache, max-age and expires.
    Pragma: http 1.0 is only recognized by IE browser, and it will not be reflected in the request header, but it does have an effect.
    Cache-control: http 1.1

3. Nginx set browser cache

      ★Nginx set browser cache: can be added in http, server, location nodes. Caching strategies can be set for various resources, not just HTML. And the <meta http-equiv> node is only for HTML

  #add_header Cache-Control no-cache;
  #add_header Cache-Control private;
  add_header Cache-Control max-age=7200;

  if ($request_filename ~* ^.*?\.(ico|jpeg|gif|jpg|png|woff)$){

    expires 7d;
  }
  if ($request_filename ~* ^.*?\.(js|css)$){

    expires 7d;
  }
  if ($request_filename ~* ^.*?\.(html|htm)$){

    expires 3d;
  }


  ★The configuration in Nginx will override the http-equiv="Cache-control" configuration of HTML.

   However, if the following three tags are added to the HTML, the effect on the browser side can only be no-cache . (From the effect point of view: Nginx's Cache-control configuration is invalid)
          Because Nginx's Cache-control configuration only covers Cache-control (if html is added with the last two tags, Nginx is still valid), and Pragma still plays a role .

    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Cache-control" content="no-cache;max-age=0"/>
    <meta http-equiv="expires" content="0"/>



Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325022542&siteId=291194637