單頁面模式和多頁面模式的優缺點

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等)僅需加載一次
　　　　頁面跳轉：使用js中的append/remove或者show/hide的方式來進行頁面內容的更換；
　　　　數據傳遞：可經過全局變量或者參數傳遞，進行相關數據交互

兩種模式對比：

頁面模式	多頁面模式（MPA  Multi-page Application）	單頁面模式（SPA  Single-page Application）
頁面的組成	多個完整頁面， 例如page1.html、page2.html等	由一個初始頁面和多個頁面模塊組成， 例如：index.html和page1.htnl.js、page2.html.js等
公共文件加載	跳轉頁面先後，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等存儲方式	直接經過參數傳遞，或者全局變量的方式進行，由於都是在一個頁面的腳本環境下
用戶體驗	若是單個頁面加載的文件相對較大（多），頁面切換加載會很慢	頁面片斷間切換較快，用戶體驗好，由於初次已經加載好相關文件。可是初次加載頁面時須要調整優化，由於加載文件較多
適用場景	適用於高度追求高度支持搜索引擎的應用	高要求的體驗度，追求界面流暢的應用
轉場動畫	不容易實現	容易實現
總結： 單頁面模式：相對比較有優點，不管在用戶體驗仍是頁面切換的數據傳遞、頁面切換動畫，均可以有比較大的操做空間 多頁面模式：比較適用於頁面跳轉較少，數據傳遞較少的項目中開發，不然使用cookie，localstorage進行數據傳遞，是一件很可怕而又不穩定的無奈選擇