【发布时间】：2015-02-20 21:40:59
【问题描述】：
我有一系列重叠的问题，最好将它们的交集问为：
在<a href 或<img src 的上下文中，URL 中的# 字符（锚点）在什么情况下会触发HTTP 提取？
通常应该：
http://foo.com/bar.html#1
和
http://foo.com/bar.html#2
需要两个不同的 HTTP 提取？我认为答案肯定是否定的。
更具体的细节：
引发这个问题的情况是我第一次尝试使用SVG stacking——一种可以在单个svg 文件中嵌入多个图标的技术，因此只需要一个HTTP 请求。本质上，这个想法是将多个 SVG 图标放在一个文件中，并使用 CSS 隐藏所有图标，使用 CSS :target 选择器选择的图标除外。
然后，当您在 HTML 中编写 img 元素时，您可以使用 URL 中的 # 字符选择单个图标：
<img
src="stacked-icons.svg#icon3"
width="80"
height="60"
alt="SVG Stacked Image"
/>
当我在 Chrome 上试用它时，它运行良好。发出单个 HTTP 请求，并且可以通过相同的 svg url 显示多个图标，使用不同的锚点/目标。
但是，当我使用 Firefox (28) 尝试此操作时，我通过控制台看到发出了 多个 HTTP 请求 - 每个 svg URL 一个！所以我看到的是这样的：
GET http://myhost.com/img/stacked-icons.svg#icon1
GET http://myhost.com/img/stacked-icons.svg#icon2
GET http://myhost.com/img/stacked-icons.svg#icon3
GET http://myhost.com/img/stacked-icons.svg#icon4
GET http://myhost.com/img/stacked-icons.svg#icon5
...这当然违背了首先使用 SVG 堆叠的目的。
Firefox 是否有某种原因为 每个 URL 发出单独的 HTTP 请求，而不是像 Chrome 那样简单地获取 img/stacked-icons.svg 一次？
这就引出了一个更广泛的问题——哪些规则决定 URL 中的 # 字符是否应该触发 HTTP 请求？
【问题讨论】：
-
这听起来像一个错误 - 从服务器的角度来看，# 后面的部分完全没有兴趣，甚至不能保证提交给服务器。也许你应该提交一个错误here，特别是因为 Chrome 以预期的方式工作（所以它与 svg 本身无关）。
-
您的缓存可能有问题。如果您禁用资源缓存（例如通过 apache/iis/etc.config），某些浏览器将继续获取资源。如果您可以使用有关 Chrome/Firefox 响应的更多详细信息更新您的问题，那将很有帮助。
-
我在 FF34 中测试时收到一个请求。并且片段不应随请求一起发送。
-
你可以使用 css sprites