How does the Back button in a web browser work?
Solution 1
Your web browser keeps a stack (or list, if you will) of the web pages that you have visited in that window. Let's say your home page is search.example and from there you visit a few other websites: video.example, portal.example, and news.example. Upon visiting the last one, the list looks like this:
search.example -> video.example -> portal.example -> news.example
^
|
current page
When you press the Back button, the browser takes you back to the previous page in the list, like this:
search.example -> video.example -> portal.example -> news.example
^
|
current page
At this point you can press Back again to take you to video.example, or you can press Forward to put you at news.example again. Let's say you press Back a second time:
search.example -> video.example -> portal.example -> news.example
^
|
current page
If you now go to, say, example.com, the list changes to look like this:
search.example -> video.example -> example.com
^
|
current page
Note that both portal.example and news.example are gone from the list. This is because you took a new route. The browser only maintains a list the pages you visited to get to where you are now, not a history of every page you've ever been to. The browser also doesn't know anything about the structure of the site you're visiting, which can lead to some surprising behavior.
You're on a shopping site (shop.example, as a short example) that has categories and subcategories of products to browse through. The site designer has thoughtfully provided breadcrumbs near the top of the window to allow you to navigate through the categories. You start at the top page of the site, click on Hardware, then Memory. The list now looks like this:
search.example -> shop.example -> shop.example/hw -> shop.example/hw/mem
^
|
current page
You want to go back to the Hardware category, so you use the breadcrumbs to go up to the parent category instead of using the Back button. Now the browser list looks like this:
search.example -> shop.example -> shop.example/hw -> shop.example/hw/mem -> shop.example/hw
^
|
current page
According to the site structure, you went backward (up a level), but to the browser you went forward because you clicked on a link. Any time you click on a link or type in a URL in the address bar, you are going forward as far as the browser is concerned, whether or not that link takes you to a page that you've already been to.
Finally, you want to return to the main site page (shop.example). You could use the breadcrumbs, but this time you click the Back button -- it seems obvious that it should take you up one level, right? But where does it take you?
It's initially confusing to many users (myself included, when I happen to do exactly this) that it takes you "down" a level, back to the Memory category. Looking at the list of pages, it's easy to see why:
search.example -> shop.example -> shop.example/hw -> shop.example/hw/mem -> shop.example/hw
^
|
current page
To go back to the main page using only the Back button would require two more presses, taking you "back" to the Hardware category and finally to the main page. It seems so obvious to us programmers what's going on, but it surprises the heck out of regular users all the time because they don't realize that the browser doesn't know anything about the hierarchical structure of whatever website they happen to be on.
Would it be great if browsers would let site designers program the Back button to do the obvious thing (take you up a level) rather than whatever it does now?
A commenter asked whether the browser reloads the page or simply displays it out of its local cache.
The answer is it depends. Site designers can specify whether the browser should cache the page or not. For pages that are set as non-cached, the browser reloads the page from the server when you press Back, as though it was the first time you are visiting it. For cached pages, the browser displays it out of the cache, which is much faster.
Solution 2
I like to think of it as re-issuing my last request. If you performed a simple GET, it would probably return the same thing it did last time (minus dynamic content). If you had done a POST, you're going to resubmit the form (after confirmation) to the server.
Solution 3
I think the easiest way to explain this is in pseudocode:
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)
Solution 4
The basic idea is to return to the last page or logical site division.
Looking at Gmail you'll see if you do a search and click a message then hit the back button it will take you back to the search that you did.
When you click it in most browsers it will either resend the last http request or will load a cache if the browser caches sites.
Solution 5
A history of pages viewed is kept in a stack-like form. When you "pop" the top three pages (A, B, C, for instance) and then go to a different page D, you cannot get to B again by hitting forward.
Pierre Thibault
I am developer and software architect. I love to program in Java, Groovy, Python, C, C++ and Objective-C. I am in search for a new idea for a new web site.
Updated on January 04, 2022Comments
-
Pierre Thibault over 2 years
I searched the Web about this question but I found nothing:
What is the logic of the back button? What is happening when we hit the back button on a Web browser?
I really would like to understand more about that.
Thank you.
-
Piers Karsenbarg almost 15 yearsThey probably want to disable the back button - or prevent its use. Good luck.
-
Pierre Thibault almost 15 yearsWhen does the browser uses the cache and when does it resend a request?
-
BobBrez almost 15 yearsIt depends on the browser and what was done up to that point. You can set most browsers not to cache and so they will always reload. There is a HTML metatag for caching but respecting that is upto the browser.
-
Pierre Thibault almost 15 yearsWhen the browser is looking in the cache, does it checks the expiration date in the header of the server response? I guess that if the page was expired, the browser will send back the same query, no? Does get and post are handled in the same way in regard of the back button? Thank you for your great answer.
-
Pierre Thibault almost 15 yearsYes, but in case of a POST, I think that the browser will ask only in the case of POST that has expired. Am I right? Because when I was doing development with ASP.net the back button was posting again to the server without asking.
-
Rune Jeppesen almost 15 yearsProbably depends on the browser. My browser (Safari) always asks -- at least I think it's always asking.
-
Pierre Thibault almost 15 yearsI was using Safari. It does not always ask. It must be following the logic that I described.
-
Pierre Thibault over 13 yearsNo, it does not work let that! If the cache is no longer valid, it sends a request back to the server to get the page again.
-
Rahul almost 9 yearsReal nice answer I must say +1. -
Louise almost 9 yearsAlas, taking into account all possible effects of the back button something that drives most developers crazy, myself included. -
huzefa biyawarwala over 6 years"Site designers can specify whether the browser should cache the page or not". How to specify this ? Using JS or Jquery ?
-
Maggyero almost 3 yearsInformative answer for the logic of the history. However the cache part does not seem to agree with the HTTP specification. -
Boyce Cecil over 2 yearsAnd never use breadcrumb and back and forward function in browser interchangably for your navigation!
