單頁面模式和多頁面模式的優缺點
1）多頁面模式（MPA Multi-page Application）：
多頁面跳轉需要刷新所有資源，每個公共資源(js、css等)需選擇性重新加載
頁面跳轉：使用window.location.href = "./index.html"進行頁面間的跳轉；
數據傳遞：可以使用path?account="123"&password=""路徑攜帶數據傳遞的方式，或者localstorage、cookie等存儲方式
2）單頁面模式（SPA Single-page Application）：
只有一張Web頁面的應用，是一種從Web服務器加載的富客戶端，單頁面跳轉僅刷新局部資源 ，公共資源(js、css等)僅需加載一次
數據傳遞：可通過全局變量或者參數傳遞，進行相關數據交互
兩種模式對比：
|
頁面模式 |
多頁面模式（MPA Multi-page Application） |
單頁面模式（SPA Single-page Application） |
|
|
頁面的組成 |
多個完整頁面， |
由一個初始頁面和多個頁面模塊組成， |
|
|
公共文件加載 |
跳轉頁面前後，js/css/img等公用文件重新加載 |
js/css/img等公用文件只在加載初始頁面時加載，更換頁面內容前後無需重新加載 |
|
|
頁面跳轉/內容更新 |
頁面通過window.location.href = "./index.html"跳轉 |
通過使用js方法，append/remove或者show/hide等方式來進行頁面內容的更換 |
|
|
頁面跳轉/內容更新 |
可以使用路徑攜帶數據傳遞的方式，例如：http://index.html?account="123"&password=123456""，或者localstorage、cookie等存儲方式 |
直接通過參數傳遞，或者全局變量的方式進行，因為都是在一個頁面的腳本環境下 |
|
|
用戶體驗 |
如果單個頁面加載的文件相對較大（多），頁面切換加載會很慢 |
頁面片段間切換較快，用戶體驗好，因為初次已經加載好相關文件。但是初次加載頁面時需要調整優化，因為加載文件較多 |
|
|
適用場景 |
適用於高度追求高度支持搜索引擎的應用 |
高要求的體驗度，追求界面流暢的應用 |
|
|
轉場動畫 |
不容易實現 |
容易實現 |
|
|
總結： |
|||
單頁面模式和多頁面模式的優缺點