仅考虑页面速度,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

我的一般结论是,使用外部文件在他们获得BIG之前并不重要.而BIG,我指的是50-100KB的范围......如果你利用那些,那就是缩小和压缩.

任何人都可以使用其他数据确认或驳斥这些结果吗？

(*假设您不使用HTTP"Expires"标头)

Answer 1

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

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

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