<a> 和 <button> 用于创建链接时是否有任何性能差异？答案

【问题标题】：Is there any performance difference between <a> and <button> when used to create link?<a> 和 <button> 用于创建链接时是否有任何性能差异？
【发布时间】：2018-03-22 18:05:41
【问题描述】：

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

上面创建的两个锚点之间有什么逻辑上的区别吗？任何性能差异或如何调用 GET 方法？

我查看了两个锚点的请求/响应标头，它们几乎相同，只有额外的“？”在使用 <button> 时的请求 URL 中。

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 文档中遇到了以下语句。

GET 请求消息中的有效负载没有定义的语义；在 GET 请求上发送有效负载正文可能会导致一些现有的拒绝请求的实现。 https://www.rfc-editor.org/rfc/rfc7231#section-4.3.1

使用 <button> 调用 GET 方法对缓存和/或代理有什么影响吗？

编辑 2：由于<button> 并非旨在创建锚点，它是否更容易受到HTTP header injection 的攻击？

编辑 3：CGI 上的维基百科文章说，

简而言之，CGI 程序通过 Unix/Linux 接收 HTTP 表单数据标准输入和大多数其他数据（例如 URL 路径、URL 参数、和 HTTP 标头数据）通过著名的 Unix/Linux 进程环境变量。

这是否意味着来自<button> 和<a> 的GET 请求将被CGI 程序以不同的方式接收？

【问题讨论】：

不是性能差异，而是语义差异。当您意思是创建超链接时，请勿使用<button>。
不，HTTP 标头注入是服务器端漏洞。

标签： javascript html http hyperlink get

【解决方案1】：

上面创建的两个锚点有逻辑上的区别吗？

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

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

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

使用 <button> 调用 GET 方法对缓存和/或代理有什么影响吗？

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

由于<button> 并非旨在创建锚点，它是否更容易受到 HTTP 标头注入的攻击？

不，除非您的表单接受用户输入或其他方面设计不当，以至于它链接到的 URL 本身就是易受攻击的，这不是这里要讨论的内容。

这是否意味着来自<button> 和<a> 的GET 请求将被CGI 程序以不同的方式接收？

是的，如果<button> 有一个name 属性将其指定为表单数据。但如果 CGI 脚本不对该表单数据做任何事情，那么差异就无关紧要了。

【讨论】：

【解决方案2】：

我相信没有。标记旨在为文档提供结构。告诉浏览器如何显示元素以及其中一些元素的作用，例如表单标签用于提交信息。 html标签可以通过css赋予相同的显示类型，例如一个按钮可以看起来像一个链接，而一个链接可以看起来像一个按钮。

语义有助于提高文档的可读性。

【讨论】：