укладка страниц в SPA, хорошая идея или плохая?

Question

Я создал фреймворк в javascript для своих личных одностраничных приложений, и я пытаюсь добавить к нему функцию страницы стека.

Если вы когда-либо работали с андроидом, вы видели, что каждое новое действие или страница, созданная в андроиде, отталкивает предыдущую обратно в стек, к которой можно получить доступ, как только пользователь нажмет кнопку «Назад», истории в браузере.

Единственная разница в том, что в android страница, которая была нажата для стека, остается там до тех пор, пока ОС не выйдет из бара или что-то в этом роде, но в браузере страница будет уничтожена, несмотря ни на что.

Теперь, в моем каркасе, я разработал очень простое решение для хранения страниц в памяти, так что, когда пользователь нажимает кнопку «Назад», вместо загрузки данных с сервера я просто нахожу страницу в стеке и если он существует, я просто привожу его на передний план и нажимаю текущую страницу обратно в стек.

, но есть некоторые проблемы, связанные с этим методом:

1. если держать сложены страницы в Javascript переменной или сохранить его в DOM и просто сделать дисплей: нет; стиль, применяемый к нему, выводя его на передний план и делая его видимым, требует красить всю страницу снова, и если страница слишком велика, это означает большой процесс и делает переход между страницами чрезвычайно медленным, особенно если у вас есть анимация при переходе страницы.

2. , и если наложенная страница видна и просто нажата с помощью z-index, прокрутка вызовет проблему, поскольку прокрутка для предыдущих страниц по-прежнему доступна. и если вы делаете переполнения страниц: hidden; то, если вы складываете несколько страниц, прокрутка становится очень медленной и прерывистой, потому что браузер должен прокручивать несколько слоев раскрашенных страниц.

, и поэтому мой вопрос в том, есть ли даже хорошая идея укладывать страницы с этими проблемами? , или это просто не должно произойти в браузерах?

Answer 1

В зависимости от вашего SPA я не думаю, что это хорошая идея, чтобы сохранить все страницы в DOM и скрыть их с помощью display: none; или другого z-индекса. То, что вы могли бы попытаться сделать, - сохранить состояние/информацию на странице в переменной и удалить все связанные элементы из DOM. Когда пользователь возвращается на одну страницу, вы воссоздали элементы с информацией, которую вы ранее сохраняли в переменной. Таким образом, вы предотвращаете загрузку информации с сервера, и у вас нет проблем с возвратом в любое состояние.

Возможно, вы сможете оптимизировать его еще больше, сохранив последнюю страницу в DOM и просто спрячьте ее и сохраните состояние страниц раньше в переменной.