There is exactly a same question in StackOverflow, but I found that the browser keeps updating when to fire it(different browser performs differently), also I saw someone’s comment on an answer citing MDN docs, where he says that “I don’t think this is still true”.
As per my understanding as we continue clicking links, pushstate fires for every new page load with the content and URL mapped for every page. When we press back/forward button the browser doesn’t send a request to the URL we are returning to, rather it fires a popstate event, the event has a state variable which is earlier content loaded when we first visited the URL. And hence the browser without any reloading shows the content of that particular URL. Is this the correct way to think about?
Now this site explains the popstate by stating that it fires when we navigate into the same document object as the same page or we traverse the URL already present in history stack.
To support navigation into the same document object it cites an example of going to a link having a href (# ammended) for example going from www.example.com/home to www.example.com/home#glossarys fires a popstate (mentioned in Task 2 of the site). This is true because the entire document object gets loaded (for example a long webpage) so going to specified part of the document should not trigger a document load. But I am unable to understand how popstate gets the data what it should fetch when we visit a part of the webpage. Because for that particular link containing a # pushstate has not been triggered.
Also in Task 4 of the website, it mentioned that going back from www.example.com/home#glossarys to www.example.com/home will not fire a pop state as the document object will reload. But the document object is already loaded why its going to load again.