草庐IT

html - SVG堆栈， anchor 元素和HTTP提取

coder 2023-08-04 原文

我有一系列重叠的问题，最好将其交集为:

在什么情况下，URL中的#字符( anchor )会在<a href或<img src的上下文中触发HTTP提取？

通常，应:

http://foo.com/bar.html#1

和
http://foo.com/bar.html#2

需要两个不同的HTTP提取？我认为答案绝对应该是“否”。

更详细的信息:

引发此问题的情况是我第一次尝试使用SVG stacking(一种可以将多个图标嵌入单个svg文件中的技术)，因此仅需要一个HTTP请求。本质上，想法是将多个SVG图标放置在一个文件中，并使用CSS隐藏所有图标，但使用CSS :target选择器选择的图标除外。

然后，当您在HTML中编写#元素时，可以使用URL中的img字符选择一个单独的图标:
<img 
    src="stacked-icons.svg#icon3" 
    width="80" 
    height="60" 
    alt="SVG Stacked Image" 
/>

当我在Chrome上试用时，它可以完美运行。发出一个HTTP请求，并可以使用不同的 anchor /目标通过相同的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请求？

最佳答案

这是Plunker中的一个演示，可以帮助您解决其中的一些问题

  • Plunker
  • stack.svg#circ
  • stack.svg#rect

    • URI具有几个基本组件:

  • 协议(protocol)-确定如何发送请求
  • 域-将请求发送到
    • 的位置
  • 位置-域
    • 中的文件路径
  • 片段-在
    • 中查找文档的哪一部分

    媒体片段URI

    片段只是标识整个文件的一部分。

    根据Media Fragment URI spec的实现，对于浏览器来说，发送Fragment Identifier可能实际上是完全公平的游戏。考虑流式视频，其中一些已缓存在客户端上。如果请求是/video.ogv#t=10,20，则服务器可以通过仅发送回相关部分/段/片段来节省空间。此外，如果媒体的适用部分已经在客户端上缓存，则浏览器可以防止往返。

    考虑往返，而不是请求

    当浏览器发出GET请求时，并不一定意味着它需要从服务器一直获取文件的全新副本。如果已经具有缓存版本，则可以立即回答该请求。

    HTTP状态码
  • 200 - OK-获取资源并从服务器返回
  • 302 - Found-在高速缓存中找到资源，自从上次请求我们需要获取新副本以来，资源没有太多更改。

    • 缓存已禁用

    各种因素都会影响客户端是否执行缓存:发出请求的方式(F5-软刷新； Ctrl + R-硬刷新)，浏览器上的设置，向请求添加属性的任何开发工具以及服务器处理这些属性的方式。通常，当浏览器的开发人员工具打开时，它将自动禁用缓存，因此您可以轻松地测试对文件的更改。如果您尝试具体观察缓存行为，请确保没有任何干扰此设置的开发人员设置。

    在跨浏览器比较请求时，为了帮助减轻开发人员工具用户界面之间的差异，应使用fiddler之类的工具来检查实际的HTTP请求和通过网络发出的响应。我将为您展示简单的插件示例。页面加载时，应在同一堆叠的svg文件中请求两个不同的ID。

    这是side by side requests of the same test page in Chrome 39, FF 34, and IE 11:


    启用缓存

    但是我们想测试启用了缓存的普通客户端会发生什么。为此，请为每个浏览器更新您的开发工具，或转到fiddler和“规则”>“性能”>，然后取消选中“禁用缓存”。

    现在，我们的请求应如下所示:


    现在，所有文件都从本地缓存中返回，无论片段ID是什么

    特定浏览器的开发人员工具可能会尝试出于您自己的利益显示片段ID，但 fiddler 应始终显示实际要求的最准确地址。我测试的每个浏览器都从请求中省略了地址的片段部分:

    捆绑请求

    有趣的是，chrome似乎足够聪明，可以阻止对同一资源的第二次请求，但是当片段是地址的一部分时，FF和IE无法做到这一点。对于SVG和PNG同样如此。因此，第一次请求页面时，每次实际使用SVG堆栈时，浏览器都会加载一个文件。此后，很高兴从缓存中获取该版本，但会损害新查看者的性能。

    最终成绩

    CON :第一次旅行-并非所有浏览器都完全支持SVG堆栈。每个实例发出一个请求。
    PRO :第二次旅行-SVG资源将被适本地缓存

    其他资源
  • simurai.com被广泛认为是使用SVG堆栈的第一个应用程序，并且本文解释了当前正在进行的一些浏览器限制
  • Sven Hofmann有一个很棒的article about SVG Stacks，它涵盖了一些实现模型。
  • 如果您想 fork 它或试用示例
    • ，则这是source code in Github
  • 这是official spec for Fragment Identifiers within SVG images
  • 快速查看Browser Support for SVG Fragments

    • bug

    通常，页面所请求的相同资源将被捆绑到一个满足所有请求元素的单个请求中。 Chrome似乎已经解决了这个问题，但是我已经为FF和IE打开了漏洞，有一天可以解决这个问题。
  • Chrome -突出显示此问题的very old bug似乎已针对Webkit解决。
  • Firefox -Bug Added Here
  • Internet Explorer -Bug Added Here

    • 关于html - SVG堆栈， anchor 元素和HTTP提取，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27714853/

    素和anchorstrongbrcodehtmlcsshttpsvg

    有关html - SVG堆栈， anchor 元素和HTTP提取的更多相关文章

    1. ruby - 使用 ruby​​ 将 HTML 转换为纯文本并维护结构/格式 - 2

      我想将html转换为纯文本。不过，我不想只删除标签，我想智能地保留尽可能多的格式。为插入换行符标签，检测段落并格式化它们等。输入非常简单，通常是格式良好的html(不是整个文档，只是一堆内容，通常没有anchor或图像)。我可以将几个正则表达式放在一起，让我达到80%，但我认为可能有一些现有的解决方案更智能。 最佳答案 首先，不要尝试为此使用正则表达式。很有可能你会想出一个脆弱/脆弱的解决方案，它会随着HTML的变化而崩溃，或者很难管理和维护。您可以使用Nokogiri快速解析HTML并提取文本:require'nokogiri'h

    2. ruby - 如何模拟 Net::HTTP::Post？ - 2

      是的，我知道最好使用webmock，但我想知道如何在RSpec中模拟此方法:defmethod_to_testurl=URI.parseurireq=Net::HTTP::Post.newurl.pathres=Net::HTTP.start(url.host,url.port)do|http|http.requestreq,foo:1endresend这是RSpec:let(:uri){'http://example.com'}specify'HTTPcall'dohttp=mock:httpNet::HTTP.stub!(:start).and_yieldhttphttp.shou

    3. ruby-on-rails - Rails HTML 请求渲染 JSON - 2

      在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？ 最佳答案 您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这

    4. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

      所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

    5. ruby-on-rails - Ruby url 到 html 链接转换 - 2

      我正在使用Rails构建一个简单的聊天应用程序。当用户输入url时，我希望将其输出为html链接(即“url”)。我想知道在Ruby中是否有任何库或众所周知的方法可以做到这一点。如果没有，我有一些不错的正则表达式示例代码可以使用... 最佳答案 查看auto_linkRails提供的辅助方法。这会将所有URL和电子邮件地址变成可点击的链接(htmlanchor标记)。这是文档中的代码示例。auto_link("Gotohttp://www.rubyonrails.organdsayhellotodavid@loudthinking.

    6. ruby - Net::HTTP 获取源代码和状态 - 2

      我目前正在使用以下方法获取页面的源代码:Net::HTTP.get(URI.parse(page.url))我还想获取HTTP状态，而无需发出第二个请求。有没有办法用另一种方法做到这一点？我一直在查看文档，但似乎找不到我要找的东西。 最佳答案 在我看来，除非您需要一些真正的低级访问或控制，否则最好使用Ruby的内置Open::URI模块:require'open-uri'io=open('http://www.example.org/')#=>#body=io.read[0,50]#=>"["200","OK"]io.base_ur

    7. ruby-on-rails - capybara ::ElementNotFound:无法找到 xpath "/html" - 2

      我正在学习http://ruby.railstutorial.org/chapters/static-pages上的RubyonRails教程并遇到以下错误StaticPagesHomepageshouldhavethecontent'SampleApp'Failure/Error:page.shouldhave_content('SampleApp')Capybara::ElementNotFound:Unabletofindxpath"/html"#(eval):2:in`text'#./spec/requests/static_pages_spec.rb:7:in`(root)'

    8. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

      1.错误信息：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者：Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因：docker使用的镜像网址默认为国外，下载容易超时，需要修改成国内镜像地址（首先阿里

    9. ruby - 如何使用 Ruby 将 CSV 文件读入 HTML 表格？ - 2

      我正在尝试将一个简单的CSV文件读入HTML表格以在浏览器中显示，但我遇到了麻烦。这就是我正在尝试的:Controller:defshow@csv=CSV.open("file.csv",:headers=>true)end查看:输出:NameStartDateEndDateQuantityPostalCode基本上我只获取标题，而不会读取和呈现CSV正文。 最佳答案 这最终成为最终解决方案:Controller:defshow#OpenaCSVfile,andthenreaditintoaCSV::Tableobjectforda

    10. ruby-on-rails - Rails - 从命名路由中提取 HTTP 动词 - 2

      Rails中有没有一种方法可以提取与路由关联的HTTP动词？例如，给定这样的路线:将“users”匹配到:“users#show”，通过:[:get,:post]我能实现这样的目标吗？users_path.respond_to?(:get)(显然#respond_to不是正确的方法)我最接近的是通过执行以下操作，但它似乎并不令人满意。Rails.application.routes.routes.named_routes["users"].constraints[:request_method]#=>/^GET$/对于上下文，我有一个设置cookie然后执行redirect_to:ba

    随机推荐