При разработке сложных веб-приложений, таких как SPA, мы сталкиваемся с проблемой отображения / включения / сохранения обновленных частей приложения в разное время.
Например, в качестве простого примера рассмотрите возможность замены текущей страницы / раздела / активности приложения в SPA.
Предполагая, что эти деревья нетривиальны (они являются целыми страницами, они могут содержать CSS-анимации, обработчики событий, некоторый нестатический контент и т. Д.) И что мы заботимся о производительности, что такое, в настоящее время, предпочтительный способ поменять их местами? Какой подход выбирают современные рамки? Почему?
В частности, важно учитывать несколько показателей:
- Общая производительность / использование памяти / и т. Д. (т.е. когда не меняются страницы)
- Фактическое время, необходимое для переключения страниц
Обратите внимание, что для того, чтобы быть максимально быстрым, мы хотим каким-то образом сохранять контент / страницы предварительно загруженными (т. Е. Здесь не обсуждаются сетевые запросы).
Для контекста, вот несколько способов, которыми люди пользовались за эти годы:
Есть несколько строковых шаблонов в JS. Когда страницы переключаются, полностью замените содержимое сразу innerHTML (для повышения производительности), заново подключите обработчики и начните обновлять нестатические значения по мере необходимости в этот момент и т. Д.
Хранить все в DOM (то есть все элементы всех возможных страниц), но иметь неактивные страницы с display: none. Затем поменяйте местами текущую страницу, просто переключив свойство display на странице, которая выходит, и странице, которая выходит. Кроме того, не обновляйте невидимые страницы, чтобы избежать снижения производительности.
Сохранение деревьев в JS (т. Е. Сохраняйте ссылку на каждый самый верхний Node каждой страницы в JS) и меняйте их местами в DOM, например, с помощью. replaceChild().