Understanding browser history and browser history

Understanding browser history and browser history

This is a basic article about history stack Management in browsers. The reason for writing this is that I recently want to study pushState to see what problems will occur when using it to implement SPA. pushState ultimately affects the content in the browser history record stack, so it took some time to figure out how the browser managed the history stack. During the study, I found 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 testing the content later in this article. If you are also interested, we recommend that you open this demo in the new tab every time you want to test a new problem, instead of opening it from a tab that has already opened a Web page. Because the tab that has already opened a Web page, its history stack contains the web page records that were previously accessed, so it will affect the results of the problem you want to test.

The browser will record the webpage accessed in the same window (Tab). No matter which of the following methods we change the webpage, the browser will record the changed webpage, in this way, the browser's forward and backward buttons can be used to quickly switch to the accessed webpage:
1) directly enter the webpage address in the address bar;
2) Click through a hyperlink in the webpage to jump to another webpage, but it cannot be a link opened in a new window;
3) Use a script to change location. href to jump to another webpage;
4) Jump to other web pages through form submission, but it cannot be a form submitted to a new window.
In short, as long as the webpage jumps in the same window, the browser will record it. Except refresh, The length attribute of the history object can be used to view the total number of historical records stored in the current window. On the previous demo page, I printed this attribute on the page, only when the page changes, this property will change, but the property will not be changed when you refresh the page.

The browser has a Data Structure to store the web page's historical records. I call it a historical record stack because its structure is similar to the stack's usage.

Operation Test 1:Assume that you copy the demo address and perform the following operations in chrome:

.

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

Because the current browsers all adopt the multi-tab mode, even if you open a tab and do not visit a specific webpage, the browser has created a BOM object for this tab, such as the history object, then, the blank page of the new tab is used as the first record in the history record. So we can see eight records in the last column, which is the same as the number displayed on the demo page:

Together 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 webpage address in the way listed above, the new page will be pushed to the top of the history stack, and the pointer will be directed to this latest webpage, as shown in the figure above, each time the page is changed, the pointer to the current page always points to the record at the top of the history record stack; when we use the browser's forward and backward functions (including buttons, shortcuts, right-click menus, etc.) or the go/back/forward method provided by history, the content of the history record stack will not be changed, the pointer will only be moved:

1) forward function/go (1)/forward, just move this pointer up to 1 position;

2) The Backward function/go (-1)/forward only moves the pointer down to one position;

3) go (n) allows the pointer to move up n positions; go (-n) allows the pointer to move down n positions.

Based on the pointer position after the browser moves, find the web page in the history stack for display. Assume thatOperation Test 1.

Operation Test 2:Click the back button of the browser 7 times.

At this time, the browser's storage status of the history record stack is changed to the following State:

Although history. go (n) and history. go (-n) can move the pointer to any position, but the pointer will not move when the position to be moved exceeds the position range of the history stack. ThereforeOperation Test 2In the result, calling history. go (-100) and history. go (100) does not work.

In either case, the history stack content is changed.

Operation Test 3: Let's proceedOperation Test 2Click the forward button three times to bring the browser's history stack to the following status:

At this time, because neither Operation Test 2 nor Operation Test 3 has changed the content of the history record stack, if it is correct, the historical record statistics on the page should be 8:

Operation Test 4:Next, we will perform the following two steps: Click demo2.html and click demo3.html. At this time, the history statistics on the page are changed:

History. length has changed, indicating that the history stack content has also changed. But why is it 6 instead of 10 (8 + 2? Check the status of the browser history stack:

When the browser pushes a new record to the history record stack, it directly presses the cursor behind the current pointer. If there are other record items behind the current pointer, it will be discarded. In this way, we can understand that there are only six historical records after Operation Test 4.

Another key aspect of the browser's management of historical records is that there is a limit on the total number of storage records on the history stack. chrome and firefox both have 50. When the storage volume of the history record stack exceeds this limit, the storage of the history record will be stored in a rolling manner, that is, the new record will be pushed to the top of the stack, the bottom record is removed from the bottom of the stack. On the demo page, click demo1, demo2, demo3, and demo4 continuously. When the number of times reaches a certain value, the statistics printed on the page will not change, it indicates that the historical records have reached the limit. However, in IE11, I went to over 100 and found that it was still changing, indicating that the restrictions on IE may be higher or absent ..

This article records some browser content about history management, which may not be in place. We welcome your criticism and correction. The above content is helpful for anyone who needs it to deepen their understanding of history and pushState. Thank you for reading :)