Одностраничное приложение (одностраничное веб-приложение, SPA)
Приложение только с одной веб-страницей представляет собой полнофункциональный клиент, загружаемый с веб-сервера. Переход на одну страницу обновляет только локальные ресурсы, а общедоступные ресурсы (js, css и т. д.) нужно загружать только один раз. Часто используется для ПК. -боковые официальные сайты, магазины и т.д. сайт
Как показано на рисунке:
Многостраничное приложение (MPA)
Многостраничный переход для обновления всех ресурсов, каждый общедоступный ресурс (js, css и т. д.) необходимо выборочно перезагружать, обычно используется в приложении или клиенте и т. д.
Как показано на рисунке:
Конкретный сравнительный анализ:
| Одностраничное приложение (одностраничное веб-приложение, SPA) | Многостраничное приложение (MPA) | |
|---|---|---|
| сочинение | Страница оболочки и несколько фрагментов страницы | Несколько полных страниц |
| Совместное использование ресурсов (css, js) | Обычный, просто загрузите в раздел оболочки | Не используется, каждая страница должна быть загружена |
| Метод обновления | Страница частично обновлена или изменена | полное обновление страницы |
| шаблон URL | a.com/#/pageone a.com/#/pagetwo |
a.com/pageone.html a.com/pagetwo.html |
| Пользовательский опыт | Быстрое переключение между фрагментами страницы, удобный пользовательский интерфейс | Переключение страниц загружается медленно, беглости недостаточно, а взаимодействие с пользователем относительно плохое. |
| анимация перехода | легко выполнить | не могу достичь |
| Передача данных | легкий | Зависит от параметров URL или файлов cookie, localStorage и т. д. |
| Поисковая оптимизация (SEO) | Требуется отдельное решение, его сложно внедрить, и он не способствует поисковой оптимизации. Для оптимизации можно использовать рендеринг на стороне сервера (SSR). | Легко реализовать |
| Пробный диапазон | Опыт высокого спроса, стремление к гладкому интерфейсу приложений | Идеально подходит для приложений, ориентированных на поисковые системы с высокой поддержкой |
| Затраты на разработку | Высшее, часто приходится полагаться на профессиональные рамки | Ниже, но страница повторяет код больше |
| стоимость технического обслуживания | относительно легко | относительно сложный |