Skip to content

HTTP Requests And Your Browser’s Cache

by arlo on May 28th, 2013 

What is an HTTP request

An HTTP request is when the browser needs to go back through the internet to retrieve a resource. This resource can be what is considered static or dynamic. Static resources are usually in the form of images, css or js files. Dynamic resources are usually serverside scripts like PHP, Perl, Ruby, etc.

What does it take to cache an HTTP request?

There are 2 apects of an HTTP request that can qualify it for being cached:

  • Specifc HTTP cache and expire headers
  • A unique URL

Static Resources

HTTP requests for images, css and js files are usually automatically cached because they meet the above requirements. Although your web server may not send cache and expire headers for static files, most browsers are smart enough to detect and appropriately cache static resources. The browser will cache a static resource as long as it also meets the second requirement of a unique URL (filename). Until you change the name of the image, css or js file it will be cached by the browser. The second time you visit the webpage, static resources should be cached and the request diagram looks like this:

The browser checks it’s cache before creating an HTTP request. In the above scenario, the browser found a cached version for each of the static resources. Time was saved and the page rendered that much faster.

Dynamic Resources (e.g. XML, JSON, JSONP)

Dynamic resources are generated by a serverside scripting language like PHP, Ruby, Perl, etc. The scripting language can generate information in HTML or other formats like XML, JSON, JSONP, etc.

HTTP requests for dynamic resources, like JSONP calls, usually fail to meet the above caching requirements. The developer will need to explicitly send back response headers for Cache-Control: and Expires: headers. If a dynamic resource has set the appropriate headers, then the browser will cache dynamic response for that exact same URL.

The browser checks it’s cache before creating an HTTP request. In the above scenario, the browser found a cached version for each of the dynamic resources. The combination of static and dynamic resources cached saves a tremendous amount of time.

From → HTTP