Understanding browser history

This is a basic article that talks about some related content of history stack management in browsers. The reason for writing this is that I recently wanted to study pushState to see what problems would be encountered when using it to implement SPA. PushState ultimately affects the content in the browser history stack, so I spent some time thinking about it. How browsers manage the history stack. Because during the research process, I discovered some important points that I had never noticed before, so I recorded them.

Demo address: http://liuyunzhuge.github.io/blog/history/demo1.html

This demo is used for related tests mentioned later in this article. If you are also interested, it is recommended that you open this demo in a new tab every time you want to test a new problem, instead of opening it from an already opened one. Open the tab of the web page; because the tab of the web page has been opened, its history stack already contains records of previously visited web pages, so it will affect the results of the problem you want to test.

The browser will record the web pages visited in the same window (tab). No matter we change the web page in any of the following ways, the browser will record the changed web page so that it can be used through the browser's forward and back buttons. , can quickly switch to web pages that have been visited:
1) Enter the web page address directly in the address bar;
2) Click on the hyperlink in the web page to jump to other web pages; but it cannot be a link that opens in a new window ;
3) Jump to other web pages by changing location.href through a script;
4) Jump to other web pages by submitting a form; but it cannot be a form submitted to a new window.
In short, as long as the web page jumps within the same window, the browser will record it. Except for refresh, the length attribute of the history object can view the total number of historical records stored in the current window. In the previous demo page, I printed this attribute on the page. This attribute will only change when the web page changes; while refreshing the web page This property will not be changed.

The browser has a data structure to store the history of web pages. I call it a history stack because its structure is somewhat similar to the way a stack is used.

Operation test one: If you copy the previous demo address, and then follow the following steps in the chrome browser:

Open a new tab; enter demo1.html; click demo2.html; click demo3.html; click demo4.html; click demo3.html; click demo2.html; click demo1.html.

The browser will store the above access records in a way similar to the figure below:

Since current browsers are in multi-tab mode, when you open a tab, even if you do not visit a specific web page, the browser will create a BOM object for this tab, such as the history object, and then add the new option The blank page of the card is used as the first record in the history. So you can see 8 records in the last column in the picture above, which is the same as the number displayed on the demo page:

Along with the history stack, the browser also has an access pointer to indicate the position of the current web page in the history stack. By default, when we change the web page address through the methods listed above, the new page will be pushed to the top of the history stack and the pointer will be pointed to the latest web page, as shown in the figure above. Every time the page is changed, the pointer of the current page always points to the record at the top of the history stack; when we use the browser's forward and backward functions (including buttons, shortcuts, right-click menus, etc.) or the go provided by history The /back/forward methods will not change the contents of the history stack, but will only move the pointer:

1) The forward function/go(1)/forward just moves the pointer up by 1 position;

2) The backward function/go(-1)/forward just moves the pointer down by 1 position;

3) go(n) moves the pointer up n positions; go(-n) moves the pointer down n positions.

The browser finds the web page in the history stack and displays it based on the moved pointer position. If you continue to perform the operation to test the result of , continue to do the following operations.

Operation test 2: Click the browser back button 7 times.

At this time, the storage status of the history stack of the browser becomes the following state:

Although history.go(n) and history.go(-n) can move the pointer to any position, when the position to be moved exceeds the position range of the history stack, the pointer will not move. So in the results of Operation Test 2, calling history.go(-100) and history.go(100) will not work.

There are two other situations that will change the contents of the history stack.

Operation Test 3: If we follow the results of Operation Test 2 and click the forward button three times, the browser’s history stack will enter the following state:

At this time, since neither operation test 2 nor operation test 3 changed the content of the history stack, if correct, the history statistics on the page should still be 8:

Operation test four: Next, we do the following two steps: click demo2.html, click demo3.html. At this time, the history statistics on the page become:

history.length has changed, indicating that the contents of the history stack have also changed. But why does it become 6 instead of 10 (8+2)? Take a look at the state of the browser history stack at this point:

When the browser pushes a new record into the history stack, it pushes it directly behind the current pointer. If there are other record items behind the current pointer, they will be discarded. This makes it easy to understand why the total number of historical records after operation test four is only 6.

Another important point in browser management of history records is that there is a limit on the total number of history stacks stored, both Chrome and Firefox are 50. When the storage amount of the history stack exceeds this limit, the storage of history records will be stored in a rolling manner, that is, new records will be pushed to the top of the stack, and the bottom records will be removed from the bottom of the stack. . By continuously switching and clicking demo1, demo2, demo3, and demo4 on the demo page, when a certain number of times is reached, the statistical information printed on the page will no longer change, which means that the historical record limit has been reached. However, in IE11, I clicked to more than 100 and found that it was still changing, indicating that IE's restrictions may or may not be higher. .

This article records some content about browser history management. There may be some imperfections in the analysis. Your criticism and corrections are welcome. I hope the above content will be helpful to friends in need to deepen their understanding of history and pushState. Thank you for reading:)