【发布时间】：2013-07-15 17:25:04
【问题描述】：
在通过 2G 移动连接 (~0.1mbps) 至少有 500 毫秒延迟的环境中，将服务器上大约 5-10 个文件中大约 10kb 的 css 和 js 发送到服务器的最快和最有效的方法是什么？客户？
我能想到三个选项：
- 所有js合并到一个文件，所有css合并到一个文件
- 一一链接所有css和js文件
- 内联所有内容
我知道 google 使用内联，但这可能只是为了节省服务器套接字。他们甚至通过在无状态模式下运行来节省内存——他们相信客户端会为他们记住会话。服务器电源根本不是问题。
另一方面，facebook 似乎会自动生成他们的 css（他们的名字是 base64 编码的），但会生成超过 10 个不同的文件发送给用户，而且他们似乎甚至没有对其进行大量优化；只是删除了一些空格。
我已经通过一个压缩所有文件的函数传递所有文件，因此其中任何一个都是可行的。我不想选择第一个替代方案，因为它更容易。
前两个利用缓存（第二个比第一个少一点），但第二个只需要向服务器发出三个请求，第三个只需要来自服务器的一个 get 请求（忽略我们的少数图像可能在某些页面上）。
Android / iOS 是否在浏览器重启时缓存 js 和 css？如果不是，那么 inline 听起来更好。
唯一的目标是最小化用户的平均加载时间。每个用户每天将在网站上花费大约 100 个页面加载，每天查看大约 40 个 css 和 js 文件。 css 和 js 基本上是静态内容。它设置为缓存 30 天，如果文件更改，我们使用 /path/to/file.ext?md5-hash-of-file 更改 url。此外，尽可能对所有内容进行 gzip 压缩。
编辑：
我想我应该澄清我为第二个找到的两个选项。在整个站点中为 css 和 js 使用单个文件是个好主意吗？它只会使用两个请求并删除任何双重（或七重）缓存，因为单个函数位于两个或多个不同的组合 js 文件中，但最大 1MB 的下载听起来并不那么好。
今天它基本上是每个视图一个组合的 css，所以每次你再次查看同一个页面时，内容都会被缓存。但是，有些js和css用在不止一个页面上。
【问题讨论】：
-
1 意味着发送的请求更少，但是当您设置缓存标头时，这并不重要。至于3，你的页面是动态生成的吗？如果是这样，它将不会被缓存并且内联 CSS/JS 将是一个糟糕的主意。至于 Android/iOS 是否缓存文件，这将取决于这些文件的大小。
-
如果你使用 ajax 导航，内联更容易并且并不总是需要浪费带宽：例如；换出正文，将内联 js/css 留在头部。如果您经常刷新页面，几个缓存良好的外部 url 通常表现最好。请记住，由于管道内衬，2g 上的两个 50kb 文件通常比 1 100kb 文件传输得更快。但是，如果您有很多延迟，查找/xfer 一个网址可能比两个网址更快。
-
所有页面都是动态生成的，php，所以缓存根本不起作用。您知道缓存的文件大小吗？
-
ios 过去常常以 25kb/url 为上限，但那又回到了 ios4 中。我认为它在 io6 中基本上是无限的，每页允许 10mb/max。此外，您仍然可以缓存生成的页面，只需使用 expires 标头和您现有的版本系统。
-
内联 Javascript 是个坏主意，因为解析问题。将源代码放在
<!---->之间的技巧都有缺点。 （在这种情况下，-->在 Javascript 本身中可能是一个有效序列。）它们自己的文件中的 Javascript 没有这些问题！
标签： javascript android html css http