javascript - <a> 和 <button> 用于创建链接时有性能差异吗?

标签 javascript html http hyperlink get

  <body>
        <a href="index.html">Home</a>
    
        <form action="index.html" method="get">
            <button>Home</button>
        </form>        
  </body>

上面创建的两个anchor在逻辑上有区别吗?任何性能差异或如何调用 GET 方法?

我查看了两个 anchor 的请求/响应 header ,它们几乎相同,只是多了一个“?”在请求 URL 中 <button>被使用。

Request URL:http://localhost:30272/index.html
Request Method:GET
Status Code:304 Not Modified
Remote Address:[::1]:30272
Referrer Policy:no-referrer-when-downgrade
Accept-Ranges:bytes

Request URL:http://localhost:30272/index.html?
Request Method:GET
Status Code:304 Not Modified
Remote Address:[::1]:30272
Referrer Policy:no-referrer-when-downgrade
Accept-Ranges:bytes

编辑 1:在尝试深入理解 GET 时,我在 RFC 文档中遇到了以下语句。

A payload within a GET request message has no defined semantics; sending a payload body on a GET request might cause some existing implementations to reject the request. https://www.rfc-editor.org/rfc/rfc7231#section-4.3.1

是否使用 <button> 调用 GET 方法在缓存和/或代理方面有什么不同吗?

编辑 2:作为 <button>不是为了创建 anchor ,它更容易受到 HTTP header injection 的攻击吗? ?

编辑 3:关于 CGI 的维基百科文章说,

In brief, the CGI program receives HTTP forms data via Unix/Linux standard input, and most other data (such as URL paths, URL arguments, and HTTP header data) via well-known Unix/Linux process environment variables.

是否表示来自<button>的GET请求和 <a> CGI 程序会以不同的方式接收吗?

最佳答案

Is there any logical difference between the two anchors created above?

是的:只有其中一个是 anchor 。另一个是形式,而不是 anchor 。 anchor 是超链接,表单是表单。由于它们在逻辑上不同,因此无法比较性能。

但是,从表面上看,这不是您在这里要问的。您问的是,当不涉及表单数据时,超链接导航和通过 HTTP GET 提交的表单是否无法区分,答案是肯定的。

在我继续回答您的其余问题之前,我现在不妨声明一下,如果您真的想像 Neopets 在 90 年代末/00 年代初所做的那样,并在表单中使用按钮作为链接,那么请小心搜索引擎不会轻松地跟踪您的链接。当然不会比使用 <a> 更容易元素。

Does invoking GET methods using <button> make any difference in caching and/or proxying?

不,与超链接导航相比,它不会导致不同的缓存行为。只有通过 HTTP POST 提交的表单会以不同方式缓存(通常,根本不会)。

As <button> is not intended to create anchors, is it more vulnerable to HTTP header injection?

不,除非您的表单接受用户输入或制作不当以至于它链接到的 URL 本身容易受到攻击,这不是这里讨论的内容。

Does it mean GET request from <button> and <a> will be received differently by CGI program?

是的,如果<button>有一个 name指定它为表单数据的属性。但是,如果 CGI 脚本不对该表单数据执行任何操作,那么区别就无关紧要了。

关于javascript - <a> 和 <button> 用于创建链接时有性能差异吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49435605/

相关文章:

javascript - 在保留键的同时打乱对象数组

html - 背景问题

php - 在同一行显示三个不同的值

http - 内容长度与实际内容长度不匹配的适当 HTTP 状态代码是什么

java - multipart/form-data 和 application-x-www-form-urlencoded 有什么区别?

javascript - FormData Javascript 中的值

javascript - 如何使用 JavaScript 和 jQuery 正确格式化 .js 文件?

html - HTTP 获取 : send links of children and parent of the requested directory

javascript - 如何向句子数组添加链接?

javascript - 这个 JSON : 有什么问题