I've created a framework in javascript for my personal single page applications, and I'm trying to add the stacking page feature to it.
if you have ever worked with android, you have seen that every new activity or page that is created in android, pushes the previous one back in a stack that can be accessed once the user presses the back button, just like the history in a browser.
the only difference is that in android the page that has been pushed to stack, stays there until the OS runs out of ram or something, but in browser the page gets destroyed no matter what.
now, in my framework, I have come up with a very simple soloution to keep pages in memory so that when user presses the back button, instead of loading data from server, I just find the page in the stack and if it exists, I just bring it to the front and push the current page back to the stack.
but there are some issues with this method:
if you keep the stacked page in a javascript variable or you keep it in the DOM and just make the display: none; style applied to it, bringing it to the front and make it visible requires painting the whole page again and if the page is too large, this means a lot of process and makes the transition between pages extremely slow, specially if you have some animation going on while page transition.
and if the stacked page is visible, and just pushed back using z-index, then the scrolling will cause problem, as the scroll for the previous pages are still available. and if you make the pages overflow: hidden; then still if you stack multiple pages, the scrolling becomes very slow and choppy because the browser has to scroll over multiple layers of painted pages.
and so my question is, is it even a good idea to stack pages with these problems? or is it just not meant to happen in browsers yet?
Depending on your SPA I don't think it is a good idea to keep all pages in the DOM and hide them with
display: none;or a different z-index. What you could try to do is to keep the state / the information of the page in a variable and remove all related elements from the DOM. When the user is going back one page you recreated the elements with the information you previously stored in a variable. This way you prevent to load information from the server and you don't have any problems with going back to any state.You might be able to optimize it even further by keeping the last page in the DOM and simply hide it and keep the state of the pages before in a variable.