Browser Cache

  • What is browser cache?
  • Why we need it?
  • How it works?
  • How can I use?
  • HTTP header
  • Cache API
  • WebPack

Browser cache

Browser cache is a cache to store files sent from your server on client's browser. HTML, CSS, JS, media files can be cached and read from your computer instead of fetching and downloading from your server.

Why we need it?

It is obvious that fetching file is expensive because of accessing the server and downloading files. Browser only fetches and downloads content 6 files at the same time (HTTP ver 1.2). In addition, caching those files allows browser to render application even if user is offline.

How it works?

Cache is controlled by HTTP header or Cache API. First of all, browser checks if a filename is the same or not. If it is different, it will fetch the file. If it is same file name, it will check Etag and

Client

  1. Check the filename and if there is a file that has same name of it on cache.
  2. If there is the file, check expire date. If there is not expire date, access to the server and check Etag.
  3. If Etag is different, download it.

Server

HTTP Cache response before the expiry time?

Cache Busting technique. The cache-buster doesn’t stop a browser from caching the file, it just prevents it from reusing it.

example of cache busting :

http://www.example.org/media/print.css?acefe50

A string acefe50 is added at the end of print.css which makes the browser think that this is a new resource.

HTTP header

Cache-Control (response header)

  • no-store

no-store indicates that a cache must not store and applied both private and shared caches.

  • no-cache

no-cache indicates that a cache must be validated on the origin server.

  • immutable

immutable indicates that the response body will not change over time. The response is unchanged so the client does not have to send a conditional revalidation.

  • Last Modified

Last-modified directive tells when the content is modified so that client can know they need new content or not.

Last-modified: Fri, 16 Mar 2018 08:00:25 GMT
  • Etag

Etag is a token to identify content is changed or not. The problem of Last-modified is accuracy of the time. The server's clock might be wrong or fixed. It is rare case yet a token is ensuring accuracy and simple.

  • Expire

Expire allows you to set the date when it should be expired. If the the date is within expire data,

  • Max-Age

Max-Age is useful to set expire date since you just mention how long you want to keep the file on cache. The problem of expireis that the server needs to calculate the expire date by itself. Max-Age tells you how long days, weeks, months, or even years you will cache the file and browser calculates the exact day by itself.

  • 1 day in seconds = 86400

  • 1 week in seconds = 604800

  • 1 month in seconds = 2629000
  • 1 year in seconds = 31536000 (effectively infinite on internet time)

Proxy Server Caching

results matching ""

    No results matching ""