Client side caching Javascript / CSS Files

caching, css, javascript, performance

Solution

There are a few reasons:

- Browsers typically have limits on how many HTTP requests they can make to a given site at the same time (out of politeness, more than out of any true technical limit), and you don't necessarily want scriptC.js and Z.css holding up scriptA.js and A.css;

- Every individual HTTP request has overheads in latency and bandwidth, even if it's a 'conditional GET' which results in a '304 - not modified' response;

- Caches do get invalidated from time to time. In HTTP, the exact time for expiry is usually set by the server in the headers of the HTTP response. The problem is, the server never knows for sure exactly how long it will be until an update will be published, so it is constantly hedging its bets and giving a 'short enough' expiry date. (Using unique generated names for resources included by an HTML file is one way of dodging this bullet ... only the enclosing HTML page needs to be checked.

There is a small reason to have 2 scripts:

- You can have one script that starts executing ASAP, while the big script loads.

But yeah, it's all about end-user-perceived speed ... especially on the first page load, when you're trying to win their attention.

Problem

Original source