对于我正在工作的网站，在Chrome DevTools网络选项卡中，我经常会收到100多个相同的请求，请求相同的SVG复选标记图像。它看起来像这样：
它们实际上并不向服务器请求任何东西。
我的页面是否做了一些不应该做的事情？如果是，我该如何修复它？如果不是，我该如何让这些东西不再弄乱我的网络标签而不删除实际的网络请求？
我在谷歌上搜索了很多，想弄明白这个问题，在我想出一个合理的答案之前，我浪费了很多时间。我把这个沿着我的答案一起发布给别人，以防万一有人有更好的答案。
对于我正在工作的网站，在Chrome DevTools网络选项卡中，我经常会收到100多个相同的请求，请求相同的SVG复选标记图像。它看起来像这样：
它们实际上并不向服务器请求任何东西。
我的页面是否做了一些不应该做的事情？如果是，我该如何修复它？如果不是，我该如何让这些东西不再弄乱我的网络标签而不删除实际的网络请求？
我在谷歌上搜索了很多，想弄明白这个问题，在我想出一个合理的答案之前，我浪费了很多时间。我把这个沿着我的答案一起发布给别人，以防万一有人有更好的答案。
1条答案
按热度按时间irtuqstp1#
页面可能没有做错任何事情，尽管它可能使用SVG的次数比预期和/或必要的次数更多。我不确定它是否减慢了页面加载或导致其他问题，但如果是这样，它目前太小而无法注意到。
这个SVG在Chrome的DevTools的网络标签中造成的混乱可以通过“隐藏数据URL”复选框过滤掉。如果你没有看到复选框，你必须首先点击过滤器按钮（它看起来像一个漏斗，对我来说显示在“保存日志”附近）。
SVG使用Data URLs生成。在CSS中，Data URL允许您在可以使用URL的地方生成内容，例如：
这是在问题中创建SVG复选框的实际代码。这很有用，但有点令人困惑，因为它不是URL（大多数人使用这个术语，希望也是技术术语，但我不知道）。它不按位置引用资源。它不向服务器请求任何东西。
更具体地说，这个SVG：这是Bootstrap CSS中包含的一个绿色复选标记，用于指示有效的表单字段。使用SimpleForm gem和
--bootstrap安装选项的Rails项目将通过将类is-valid或was-validated应用于有效的表单字段来自动使用该复选标记。此行为不仅限于该设置，但这是一种可能遇到它的方式，因为（至少在我的情况下）简单表单甚至在隐藏字段上使用它，我在一个页面上有大约140个隐藏字段。（我现在可能会试图阻止它这样做。）在我看来，这甚至不应该出现在网络选项卡中，因为它没有使用网络。我怀疑它在那里是为了让所有被指定为URL或代替URL的东西都可以在一个地方得到解释。（如果有人能更好地解释为什么它要么 * 是 *，要么 * 应该 * 在那里，我可以把它添加到这个答案中。）