Facebook、Google 和其他大型应用程序如何处理它们的 CSS 和 JavaScript 文件？答案

【问题标题】：How do Facebook, Google and other large applications do their CSS and JavaScript files?Facebook、Google 和其他大型应用程序如何处理它们的 CSS 和 JavaScript 文件？
【发布时间】：2011-11-11 08:42:52
【问题描述】：

脸书：http://static.ak.fbcdn.net/rsrc.php/v1/yh/r/u2OL99TwlfU.css
谷歌：http://ssl.gstatic.com/gb/js/sem_cf9545d69b4bd3d22ed10206010c8b23.js

还有其他网站，比如Tagged也使用这种方法。

这些网站和其他大型应用程序如何处理这些文件？我假设当他们更新文件时，URL 实际上会发生变化，因此缓存无法识别 URL 并重新加载新文件。

我实际上对 Facebook 的 rsrc.php 比较困惑，但我仍然不太了解其余部分。看来 Google 的随机字符串是某种东西的 MD5。

我确实希望在我的网站上使用类似的东西，大型应用程序使用它，所以它一定很有用 - 即使我没有决定使用它，在不久的将来了解它可能会有所帮助。

【问题讨论】：

标签： javascript css facebook file

【解决方案1】：

（我是rsrc.php和Facebook的Haste静态资源管理系统的原作者。）

您可以在 Phabricator 文档中找到 Facebook 在静态资源管理方面遇到的一些挑战以及它如何解决这些挑战的描述：

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

对于具体问题，rsrc.php URI 就是这样（其中包含“rsrc.php”），特别是因为我们在 2007 年编写 rsrc.php 并添加、部署时没有全局 Apache 重写规则并为一些更优雅的 URI 测试一个似乎不值得费心（在 PHP 中，您可以在运行时读取“x.php”文件部分之后的 URI 的其余部分）。所以那部分只是一个 PHP 实现工件。

多年来，其他路径组件已用于各种事情，例如紧急版本号，如果缓存管道出现问题，我们可以全局碰撞以破坏每个人的缓存，哈希校验和以便我们区分有效和垃圾记录请求、更改返回资源的缓存策略以供开发的内部标志以及资源的风格（例如，针对特定浏览器定制或本地化为特定语言）。

【讨论】：

好吧，我确实假设了那些随机文件名——Facebook 是一个带有原始文件名和最后修改日期的校验和。尽管需要反转校验和才能获得实际文件。为什么我要问这个是因为我想创造一个类似的东西。我确实知道它对缓存有什么影响。例如，如果您有 image.png - 当该图像更新时，您不会看到更改，直到您硬刷新。因此，您需要修改实际 url，使其对于该文件和上次修改日期是唯一的 - 这样您就可以在不进行硬刷新的情况下查看更新。
那是一篇有趣的文章
kevin.vanzonneveld.net/techblog/article/… - 使用它从自动增量 ID 创建密钥。除了数据库中的自动增量 ID，您还可以拥有所有文件（要合并）最后修改的 timstamp 以及要合并的文件列表。当您运行应用程序时，它会构建包，将最后修改日期的总数放在一起，然后查看它是否更新。如果它较新，请插入新行并删除旧行。给它一个新的ID。我认为这是一个好的开始！
@EvanPriestley 你们是如何在没有编码人员知道或为此做任何事情的情况下设法运行 bigpipe 的。还有你们是如何在没有 JavaScript 支持的情况下做 bigpipe 的。我的意思是网站在没有 javascript 的情况下仍然可以正常运行。你们是如何在后端编写这部分代码的？

【解决方案2】：

Facebook 和 Google 都在其静态资源文件名中使用 md5 后缀。

首先，这是对性能的一般优化，我们可以使用其文件内容的 md5 对静态资源进行版本控制（缩小后）并设置 cache-control = 10 年（nginx 或 apache）。如果您在浏览器上按前进/后退按钮或第二次查看页面，文件将从本地磁盘检索，而不是通过网络检索（除非您按重新加载按钮，否则会出现 304）。

其次，在线发布代码时，可以先推送所有静态资源，不会与旧资源冲突。然后你推送所有服务器端代码，所有用户都不会错误地访问你的页面。

【讨论】：