javascript - 只考虑页面速度，什么时候 CSS 或 JS 大到可以外化

Question

常见的建议是将 CSS 和 JS 文件保存在外部。原因:您在额外的 HTTP 请求*中失去的东西，您通常可以通过不必下载可缓存的静态内容(通常是 CSS 和 JS)来获得返回。

但是，您的外部文件越小，对额外 HTTP 请求的惩罚就越大——即使它是一个 304 Not Modified回复。因此，外部文件越小，就越有理由支持内联 CSS 和 JS 内容，至少在速度是您最关心的问题时。

我进行了一些测试。无需查看细节，我的结果如下所示:

External File Size    Average Gain
----------------------------------
               1KB          -3.7ms
               2KB          -3.7ms
               4KB          -4.0ms
               8KB          -3.0ms
              16KB          -2.7ms
              32KB           1.0ms
              64KB           2.7ms
             128KB          10.0ms
             256KB         493.7ms
             512KB        1047.0ms
            1024KB        2569.7ms

我的一般结论是，在外部文件变得大之前，使用外部文件并不重要。我所说的大 是指 50-100KB 的范围...如果您利用这些，它会被压缩和 gzip 压缩。

谁能用额外的数据证实或反驳这些结果？

(* 假设您不使用 HTTP“过期” header )

Answer 1

我没有其他数据，但我可以确认您的结果在逻辑上是合理的。今天大多数人都使用快速宽带连接，并且大多数 Web 服务器会自动 gzip 他们发送的任何基于文本的内容，因此在许多情况下发送第二个请求以加载外部资源(或验证它没有被修改)的开销) 将大于作为原始请求的一部分下载更多数据所产生的成本。

如果您愿意，甚至可以通过假设平均连接速度为 5 Mbps 和典型的往返时间为 100 毫秒来计算这个问题。有了这些假设，您将看到在进行第二个请求的开销变得合理之前，您可以向第一个请求的负载添加最多大约 62,500 个字节。这与您的数字非常相关。

然而，这并不意味着“使用外部文件并不重要”，因为除了缓存/页面加载方面之外还有其他使用它们的原因。例如，它们有助于保持您的代码和整个网站结构的健全，尤其是当您拥有跨多个页面重复使用的通用 CSS 样式和 JavaScript 实用程序时。我认为这至少与使用/不使用外部文件可能导致的页面加载时间的任何小幅增加或减少一样重要。因此，在这种情况下，即使对于较小的资源，使用外部文件也是有意义的。