一次性提供整个网页答案

【问题标题】：serve entire web page in one hop一次性提供整个网页
【发布时间】：2014-04-12 01:25:44
【问题描述】：

目前，如果一个页面有 2 个图像和 2 个 JavaScript 文件，则浏览器会进行 5 次调用。当然，你可以保持活动和流水线，但它仍然是 5 个网络调用。有没有办法发送一个 zip 文件并让浏览器解析 zip 或类似 compassed 文件中的资源？

5 次调用只是一个示例。在大型网站中，每页 30-50 次调用并不少见。此外，内联也无济于事，因为您的后续页面将引用单个 js/css/image/icon 文件。所以这些请求应该从缓存中提供。

网络呼叫很重要，特别是如果您在手机上运行混合应用程序，并且用户在东海岸，而您的数据中心在西海岸或更糟，您的用户在欧洲，而您在西海岸有数据中心等.

【问题讨论】：

我不知道。但实际上，5 个请求在 2014 年并不是什么大不了的事。
您可以使用 gzip 压缩您提供的资源，这是常见的做法，但仍然需要 5 次调用。
网络调用本身并不重要 AFAIK，这些调用所花费的时间取决于文件的大小，您可以将其缩小等。
您可以将所有 JS 放在页面上，并将图像嵌入为 Base64 或使用内联 SVG。不过，不确定您会从中获得什么。
@ChristopherMarshall 我讨厌这种态度。仅仅因为你可以在几秒钟内发出一百个请求，并不意味着你应该这样做。我花了好几个小时来优化我的 HTTP 流量，我的用户实际上已经注意到并感谢我，因为他们的移动设备上的速度非常快。

【解决方案1】：

如果您愿意购买 SSL 证书或已经拥有，我建议您使用SPDY，它在 nginx-extras 包中提供，您只需将其添加到监听行即可

listen 443 spdy;

编辑：

您可以做的其他事情很少，对于 JS 和 CSS 文件，有很多框架可以将它们编译成 1 个单独的文件，您可以手动完成，也可以在此过程中缩小文件，还可以查看预处理器比如lesscss，它们让我的生活更轻松，你可能会喜欢使用它。

至于图片，你真的不能做太多，除非它们是小图标文件，那么你应该创建一个image sprite，如果可能的话也尝试考虑使用字体，比如font-awsome或@987654325 @，因为这些是字体，您可以轻松设置它们的大小和颜色。

还要确保您已启用 gzip，如果他们说 gzip 已启用，请检查响应标头。

【讨论】：

【解决方案2】：

如果您想要快速加载页面，请密切注意浏览器在渲染页面之前需要进行的往返次数。每次行程是20ms？ 30毫秒，40毫秒？以 1/2 的速度穿越美国 50 毫秒？从 EST 到 PST--80ms.... 是的，它加起来了。

我发现减少“获取”和“304 未修改”数量的最佳方法是将所有 javascript 文件、图像和 css 缓存 1 年。

浏览器第一次需要资源时，它会进行多次往返......这无济于事。第二次需要资源——在 0 毫秒内从缓存中提供资源——甚至不会显示在网络服务器日志文件中。

您想设置 max-age 并过期为 1 年。这是我在apache中的做法： Apache: set max-age or expires in .htaccess for directory

【讨论】：