何时分离文件以节省带宽答案

【问题标题】：When to separate files to save bandwidth何时分离文件以节省带宽
【发布时间】：2010-09-17 16:20:31
【问题描述】：

我正在为我的网站做一些优化，并试图弄清楚一些内联代码可以有多大，然后才能证明拥有自己的文件而不是内联编写。

我对如何衡量的猜测是代码量（在这种情况下为 CSS 或 JS）需要大于发送和接收的 HTTP 数据包才能获得 304 响应。

请忽略这样一个事实，即在 HTML 页面中保留样式和 javascript 是一种很好的做法，并且只考虑浏览器性能。 :)

【问题讨论】：

欣赏到目前为止的答案，但这更多的是理论而不是实际。问题是在缓存的 http 请求小于内联下载代码之前，一些代码需要多大。造成这种情况的原因可能包括移动开发，其中最大的减速是额外的 http 请求

标签： javascript html css performance

【解决方案1】：

我自己多看一点；我认为我在正确的轨道上。

实际的 HTTP 请求看起来有点像这样：

HTTP/1.1 304 Not Modified
Cache-Control: max-age=604800, public
Last-Modified: Tue, 17 Jun 2008 17:20:41 GMT
Date: Mon, 20 Oct 2008 03:49:58 GMT
Server: ucfe

大约 163 字节对吗？

通过查看这里 (http://www.freesoft.org/CIE/Course/Section4/8.htm)，看起来 TCP 数据包本身的范围可以从大约 20 个字节向上。

所以我猜总请求 + 响应看起来大约 250 个字节（猜测 30 个字节用于 tcp 数据包 + 一些填充用于请求和响应文本）全部加起来。真的没什么。

我认为每个人都是对的。没什么大不了的。仍然对这对移动浏览器的影响感兴趣，但是多个请求的延迟将是一个大问题。

如果我的计算有误，请指出

【讨论】：

【解决方案2】：

同意 Ryan 的观点，但是，如果您的受众只会看到您的网站一次，或者如果您从不希望文件被缓存，那么包括 CSS 和 JS 内联。

最佳做法是让您的服务器将所有 CSS/JS 文件合并并 gzip 到一个可缓存文件中，以节省请求和带宽。

至少可以在 Tomcat 和 Glassfish 中轻松设置。

【讨论】：

【解决方案3】：

我还想补充一点，如果可能的话，您应该将您的 JS/CSS 合并到一个下载中（每个），以节省与 Web 服务器的 HTTP 连接。我相信雅虎在 Ryan 发布的 URL 中建议了这一点。我最终编写了自己的 .NET 组件，它可以结合脚本和 CSS，如果需要，还可以最小化它们并缓存它们（服务器端）。

【讨论】：

抱歉，我有点错过了回答最初的问题：任何时候您需要跨不同页面的 CSS 或脚本，它都需要在外部文件中。复制代码没有用。就像 Ryan 说的，一旦浏览器下载并缓存它，它就不会再得到它了。

【解决方案4】：

老实说，就浏览器性能而言，将 CSS 和 JS 文件分开并正确设置过期标头以便缓存它们会提高性能，而不是降低性能。浏览器会将它缓存起来，不再请求它，从而减少在多次页面查看期间传输的数据量。

仅当您的大多数受众访问您的网站时缓存为空并且仅查看 1 个页面才会内联 CSS 和 JS 帮助。

见：

【讨论】：