通过 CloudFront 加载 CSS 图像精灵比本地加载慢
我刚刚将 CSS 图像精灵更改为从本地运行到 CloudFront，现在即使跨页面和页面重新加载也会出现明显的延迟。关于为什么会发生这种情况有什么想法吗？
I just changed my CSS image sprites to run from local to CloudFront and there's now a noticeable lag, even across pages and page reloads. Any ideas as to why this might be happening?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
将图像从
localhost移动到服务器（在本例中为 CloudFront）将始终会产生速度损失（当然是相对于localhost）。这是因为，即使使用出色的托管服务，浏览器也必须通过互联网向该服务器发送http请求，以查明文档自上次修改以来是否被修改过缓存或未缓存（未修改：HTTP 响应304）。假设文档不需要再次下载/重新缓存，这应该是 CSS 图像请求的结束（特别是如果您使用 css-sprites）。
如果由于缓存已过期或文档已更改而必须重新下载图像精灵，那么显然浏览器必须通过互联网和网络再次下载文件。由于您自己的网络/内联网、您的房子和邻居之间、家庭和机柜之间的争用以及您的 ISP 为您提供的任何速度，这都会产生费用。
而
localhost是同一台机器，并且（可能）具有以毫秒为单位的响应。相比之下，访问 Amazon 的 CloudFront 可能只需要一两秒，但这仍然要大一个数量级（或更多）。Moving images from
localhostto a server (in this case CloudFront) will always incur a speed penalty (relative tolocalhost, certainly). This is because even with a great hosting service the browser has to send an http request via the internet to that server, to find out whether the document's been modified since it was previously cached, or not (not modified: HTTP response304).Assuming that the document doesn't need to be downloaded again/re-cached that should be the end of the image-requests for the CSS (particularly if you're using css-sprites).
If the image-sprites have to be re-downloaded because the cache has expired, or the document's changed, then obviously the browser has to download the file again, via the internet and network. And this incurs a cost due to contention on your own network/intranet, between your house and your neighbours between home and cabinet and then whatever speed your ISP provides to you.
Whereas
localhostis the same machine, and (likely) has a response measured in the milliseconds. In contrast, accessing Amazon's CloudFront might only take a second or two, but that's still an order of magnitude (or more) greater.