多頁和單頁應用模式區別

多頁應用模式(MPA)

　　頁面A：http://xxx/pageA.html

　　頁面B：http://xxx/pageB.html

　　頁面A 跳轉到頁面B 整頁刷新

　　

單頁面應用模式（SPA）

　　頁面page:http://xxx/page.html,頁面內局部#page1與#page2之間跳轉局部刷新

　　

 

多頁應用與單頁應用的對比

	多頁應用MPA	單頁應用SPA
應用組成	由多個完整頁面構成	一個外殼頁面和多個頁面片斷構成
跳轉方式	從一個頁面到另一個頁面跳轉	頁面片斷之間的跳轉是把一個頁面片斷元素刪除或者隱藏，加載另外一個頁面片斷而且顯示出來。這是片斷之間的模擬跳轉，並無離開自己的外殼頁面
刷新方式	整頁刷新	頁面片斷局部刷新
跳轉後公共資源是否從新加載	是	否
url模式	http://xxx/pageA.html http://xxx/pageB.html	http://xxx/page.html#page1 http://xxx/page.html#page2
用戶體驗	頁面間切換加載慢，移動端，用戶體驗差	頁面片斷間切換快，移動端，用戶體驗想對能夠
可否實現轉場動畫	沒法實現	容易實現
頁面間傳遞數據	依賴url / cookie / localStorage； 麻煩	同一個外殼頁面內，簡單
搜索引擎優化SEO	能夠直接作	須要藉助一些框架等，麻煩
特別適用範圍	須要對搜索引擎友好的網站	對體驗要求高的應用，傾向於移動端
開發難度	低，框架選擇容易	高，須要專門的框架來下降開發難度

 

單頁引用相對於移動端仍是能夠的，可根據相應的需求選擇