Do you know the difference between load, refresh, and reload in your favorite browser? Shortcuts differ but there are roughly three different types of reloads available in most browsers, for example in Firefox:

  • load: hit enter in the address bar; click on links
  • reload: F5; Ctrl+R; toolbar’s refresh button; Menu -> Reload
  • hard reload: Ctrl+F5; Ctrl+Shift+R

The terms refresh, reload, and load are frequently used interchangeably and what I listed as a hard reload is also known as super refresh or reload (override cache).

All of this is not really important until you design (or test) features related to browser caching. Then you need to know what the above mean in terms of cache control. Provided the requested resource is in the browser cache and not stale, the following happens in Firefox:

  • load: no request happens until the cached resource expires
  • reload: the request contains the If-Modified-Since and Cache-Control: max-age=0 headers that allow the server to respond with 304 Not Modified if applicable
  • hard reload: the request contains the Pragma: no-cache and Cache-Control: no-cache headers and will bypass the cache

Although a simple concept, it has the potential to drive you into great debugging circles when you are not aware of the subtle differences between the different reload-variants :-)