Web 浏览器中的后退按钮如何工作？

Posted 2023-02-21

【中文标题】Web 浏览器中的后退按钮如何工作？

【英文标题】：How does the Back button in a web browser work?

【发布时间】：2010-11-21 18:38:47

【问题描述】：

我在网上搜索了这个问题，但一无所获：

返回按钮的逻辑是什么？当我们点击 Web 浏览器上的后退按钮时会发生什么？

我真的很想了解更多。

谢谢。

【问题讨论】：

是重新发送请求还是从本地缓存加载页面？当您回击时，是否会发送在第一个响应中创建的 cookie？等

【参考方案1】：

您的网络浏览器会保留您在该窗口中访问过的网页的堆栈（或列表，如果您愿意的话）。假设您的主页是 google.com，然后您从那里访问了其他几个网站：youtube.com、yahoo.com 和 cnn.com。访问最后一个时，列表如下所示：

google.com -> youtube.com -> yahoo.com -> cnn.com
                                            ^
                                            |
                                       current page

当您按下返回按钮时，浏览器会将您带回到列表中的上一页，如下所示：

google.com -> youtube.com -> yahoo.com -> cnn.com
                                ^
                                |
                           current page

此时，您可以再次按 Back 将您带到 youtube.com，或者您可以按 Forward 再次将您带到 cnn.com。假设您再次按返回：

google.com -> youtube.com -> yahoo.com -> cnn.com
                   ^
                   |
              current page

如果您现在访问 abc.com，列表将变为如下所示：

google.com -> youtube.com -> abc.com
                               ^
                               |
                          current page

请注意，yahoo.com 和 cnn.com 均已从列表中消失。这是因为你走了一条新路线。浏览器仅维护您访问过的页面列表以到达您现在所在的位置，而不是您曾经访问过的每个页面的历史记录。浏览器也不知道您正在访问的网站的结构，这可能会导致一些令人惊讶的行为。

您在一个购物网站（ne.com，作为一个简短的示例）上具有可供浏览的产品类别和子类别。网站设计者在窗口顶部附近提供了breadcrumbs，以便您在类别中导航。您从站点的首页开始，单击硬件，然后单击内存。该列表现在如下所示：

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem
                                           ^
                                           |
                                      current page

您想返回到“硬件”类别，因此使用面包屑导航到父类别，而不是使用“后退”按钮。现在浏览器列表如下所示：

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                                          ^
                                                          |
                                                     current page

根据站点结构，您后退（上一级），但您在浏览器中前进，因为您点击了一个链接。每当您单击链接或在地址栏中输入 URL 时，就浏览器而言，无论该链接是否将您带到您已经访问过的页面，您都会继续前进。

最后，您要返回主站点页面 (ne.com)。您可以使用面包屑，但这次您单击“后退”按钮——显然它应该带您上一层，对吧？但它会带你去哪里？

最初让许多用户（包括我自己，当我恰好这样做时）感到困惑的是，它会将您“降低”一个级别，回到“内存”类别。查看页面列表，很容易看出原因：

google.com -> ne.com -> ne.com/hw -> ne.com/hw/mem -> ne.com/hw
                                            ^
                                            |
                                       current page

要仅使用“后退”按钮返回主页，需要再按两次，将您“返回”到“硬件”类别，最后返回主页。对于我们程序员来说，发生了什么似乎很明显，但它总是让普通用户感到惊讶，因为他们没有意识到浏览器对他们碰巧所在的任何网站的层次结构一无所知。

如果浏览器允许网站设计者通过编程后退按钮来做显而易见的事情（让你更上一层楼）而不是现在做的任何事情，那会不会很棒？

编辑：评论者询问浏览器是重新加载页面还是直接从本地缓存中显示。

答案是视情况而定。站点设计者可以指定浏览器是否应该缓存页面。对于设置为非缓存的页面，当您按“返回”时，浏览器会从服务器重新加载页面，就好像这是您第一次访问它一样。对于缓存页面，浏览器将其显示在缓存之外，速度要快得多。

【讨论】：

浏览器在缓存中查找时，是否会检查服务器响应标头中的过期日期？我猜如果页面过期，浏览器会发回相同的查询，不是吗？对于后退按钮，get 和 post 是否以相同的方式处理？感谢您的精彩回答。

第一个问题：是的，没错。如果页面已过期，浏览器应使用相同的 URL 和 POST 数据重新请求该页面。但是对于 POST 操作，大多数浏览器都会询问用户是否要重新发送。我的猜测是重新发送 POST 数据可能会导致重复发布、重复交易等。这取决于网站设计人员来防止这种情况发生。

是的，但是在 POST 的情况下，我认为浏览器只会在 POST 过期的情况下询问。我对吗？因为当我使用 ASP.net 进行开发时，后退按钮会在没有询问的情况下再次发布到服务器。

可能取决于浏览器。我的浏览器 (Safari) 总是询问 - 至少我认为它总是询问。

我使用的是 Safari。它并不总是问。它必须遵循我描述的逻辑。

【参考方案2】：

我喜欢将其视为重新发出我的最后一个请求。如果您执行一个简单的 GET，它可能会返回与上次相同的内容（减去动态内容）。如果您进行了 POST，您将重新提交表单（确认后）到服务器。

【参考方案3】：

我认为解释这一点的最简单方法是使用伪代码：

class Page:
    String url, ...
    Page previous, next # implements a doubly-linked list

class History:
    Page current # current page

    void back():
        if current.previous == null:
            return
        current = current.previous
        refresh()

    void forward():
        if current.next == null:
            return
        current = current.next
        refresh()

    void loadPage(Page newPage):
        newPage.previous = current
        current.next = newPage # remove all the future pages
        current = current.next
        display(current)

【参考方案4】：

基本思路是返回最后一页或逻辑站点划分。

查看 Gmail，您会看到如果您进行搜索并单击邮件，然后点击返回按钮，它将带您回到您所做的搜索。

当您在大多数浏览器中单击它时，它要么重新发送最后一个 http 请求，要么在浏览器缓存站点时加载缓存。

【讨论】：

浏览器什么时候使用缓存，什么时候重发请求？

这取决于浏览器以及到目前为止所做的工作。您可以将大多数浏览器设置为不缓存，因此它们将始终重新加载。有一个用于缓存的 html 元标记，但尊重这取决于浏览器。

【参考方案5】：

查看页面的历史记录以类似堆栈的形式保存。当您“弹出”前三个页面（例如 A、B、C）然后转到另一个页面 D 时，您无法通过向前点击再次到达 B。

【参考方案6】：

作为开发者，无论浏览器如何处理后退按钮，您都应该确保您的 web 应用程序正常工作 :-) 它会重新发送请求吗？新请求与旧请求相同，还是有任何不同？浏览器会要求用户确认重新发布吗？将重新请求页面的哪些元素以及从缓存中加载哪些元素？浏览器会尊重我的缓存控制标头吗？

这些问题的答案取决于品牌、浏览器版本和用户设置。设计您的软件，让所有这些都无关紧要。

抱歉，答案不是很直接，但这里已经有一些直接的答案了。

【讨论】：

唉，考虑到后退按钮的所有可能影响，这会让大多数开发人员发疯，包括我自己。

【参考方案7】：

浏览器总是存储页面以供其记忆以及当我们按下后退按钮时 它不会向服务器发送上一页的请求，而是只看到它的缓存 它存储页面的位置并遵循 LIFO 规则，这就是它首先给我们该页面的原因 在按下我们上次打开的后退按钮时

【讨论】：

不，这样不行！如果缓存不再有效，它会向服务器发送一个请求以再次获取该页面。

【参考方案8】：

我想补充一些东西作为补充。 当您在浏览器中点击后退按钮，或者在 chrome 中点击 (alt+left) 时，浏览器实际上只是在历史记录中加载缓存的 HTML 文件。

它不会向服务器发送另一个 GET 请求，

所以当您返回某个电子商务网站并再次传递密码时，它会向您抛出异常。

确实有些网页不允许您缓存自身，但这种情况很少见，在这种情况下或缓存已过期，浏览器将发送 GET 请求而不是使用缓存中的 HTML。

【讨论】：

并且永远不要在浏览器中互换使用面包屑和后退功能进行导航！

【参考方案9】：

浏览器在当前页面之前加载最后查看的页面，然后遵循可能发生的任何重定向？

我似乎错过了问题的重点。

【讨论】：

他们可能想要禁用后退按钮 - 或阻止其使用。祝你好运。