單頁面和多頁面應用場景總結

一、總結

一句話總結：

多頁面應用做官網、電商類這種對SEO和首屏加載速度要求比較高的項目，單頁面可以做后台管理系統頁面

 

 

1、什么是單頁面應用？

a、【外殼頁面】：在項目應用中，以單個html頁面作為外殼頁面，並在外殼頁面一次性加載項目所依賴的資源（CSS、JS）。

b、【無感切換】：項目中其他頁面作為頁面片段在外殼頁面中進行無感切換（例如：利用H5的History監聽到URL的變化，對頁面片段進行切換（刪除和添加））。

 

 

2、單頁面形式的傳統多頁面結構？

本質上是將單頁面應用拆分成多個單頁面應用，多個單頁面應用之間的調整通過傳統形式來實現

 

 

3、單頁面原理？

利用H5的History監聽到URL的變化，對頁面片段進行切換（刪除和添加）

 

4、如何選擇頁面結構？

a、對於官網、電商類這種對SEO和首屏加載速度要求比較高的項目，可以采用多頁面應用結構。或者優秀“服務器端渲染方案”。

b、如果是后台管理系統頁面，不對外開放的系統，用單頁面應用，這樣可以利用第三方框架（Vue、React等）對系統進行組件化，

c、單頁面應用如果系統過大，導致首屏加載緩慢，可以將系統拆分成單頁面形式的多頁面應用。一般來說登錄頁面作為后台管理系統的首屏頁面。

 

 

二、單頁面和多頁面應用場景總結

轉自或參考：單頁面和多頁面應用場景總結_javascript_u012475786的專欄-CSDN博客
https://blog.csdn.net/u012475786/article/details/90081105

一、什么是單頁面應用？

基本概念：在項目應用中，以單個html頁面作為外殼頁面，並在外殼頁面一次性加載項目所依賴的資源（CSS、JS）。項目中其他頁面作為頁面片段在外殼頁面中進行無感切換（例如：利用H5的History監聽到URL的變化，對頁面片段進行切換（刪除和添加））。

單頁面應用結構圖：

 

 

優點：項目依賴資源共用，頁面片段切換流暢（無感）、頁面片段可以進行復用，頁面片段切換時可以使用轉場動畫效果；

缺點：不利於SEO優化，首屏加載緩慢。至於有些資料說開發成本高、這個不認同，以下介紹；

二、什么是多頁面應用？

這里我覺得多頁面應用可以分為兩種形式：

1. 傳統形式：這種技術方案就是最初搭建頁面的實現方式，每個頁面都有各自的HTML文件，每個頁面所依賴的資源都在各自HTML文件中引入，並且頁面之間的跳轉通過URL跳轉。架構圖如下所示：

 

 

 

2. 單頁面形式：這種技術方案根據實際項目出發，本質上是將單頁面應用拆分成多個單頁面應用，多個單頁面應用之間的調整通過傳統形式來實現；架構圖如下所示：

 

 

總結：傳統形式結構是完全符合多頁面的思想。單頁面結構是單頁面應用和多頁面應用的互補方案；解決了首屏加載慢的問題，一定程度優化了SEO優化（作用感覺不大）。相對於傳統形式結構，它可以像單頁面應用一樣實現轉場動畫（多頁面跳轉之間還是不能實現）。整理如下圖所示：

 

 

三、如何選擇頁面結構？

還是那句話，具體根據項目分析，對於官網、電商類這種對SEO和首屏加載速度要求比較高的項目，可以采用多頁面應用結構。或者優秀“服務器端渲染方案”；如果是后台管理系統頁面，不對外開放的系統，用單頁面應用，這樣可以利用第三方框架（Vue、React等）對系統進行組件化，如果系統過大，導致首屏加載緩慢，可以將系統拆分成單頁面形式的多頁面應用；一般來說登錄頁面作為后台管理系統的首屏頁面。