How do Facebook, Google and other large applications do their CSS and JavaScript files?

Question

Facebook: http://static.ak.fbcdn.net/rsrc.php/v1/yh/r/u2OL99TwlfU.css
Google: http://ssl.gstatic.com/gb/js/sem_cf9545d69b4bd3d22ed10206010c8b23.js

There are other sites, like Tagged which also uses this kind of method.

How do these sites and other large applications do these files? I assume when they update their file, the URL actually changes so that the cache doesn't recognise the URL and reloads the new file.

I'm actually more confused about Facebook's rsrc.php, but I still don't quite understand the rest. It appears Google's random string is an MD5 of something.

I do want something like this on my websites, large applications use it so it must be useful to use - even if I didn't decide to use, the knowledge of it may be beneficial in the near future.

Answer 1

(I am the original author of rsrc.php and Facebook's Haste static resource management system.)

You can find a description of some of the challenges Facebook encountered with static resource management and how it solved them here, in the Phabricator documentation:

https://secure.phabricator.com/book/phabflavor/article/soon_static_resources/

To the specific question, the rsrc.php URIs are like that (with "rsrc.php" in them) specifically because we didn't have a global Apache rewrite rule in 2007 when I wrote rsrc.php and adding, deploying and testing one for some more elegant URI didn't seem worth bothering with (in PHP, you can read the remainder of the URI after the "x.php" file part at runtime). So that part is just a PHP implementation artifact.

The other path components have been used for various things over the years, like an emergency version number we can bump globally to break everyone's caches if something goes wrong with the cache pipeline, a hash checksum so we can distinguish between valid and garbage requests for logging, internal flags which alter the cache policy of the returned resource for development, and flavors of a resource (e.g., tailored to a specific browser or localized to a specific language).