單頁應用和多頁應用

SPA(single page application): 單頁面應用，即一個web項目就隻有一個頁面（即一個HTML檔案）。

就是把整個項目的所有頁面的所有内容分成了很多的小塊（就是元件），可以重複利用的，可以任意調整的元件，每個元件就是一個獨立的部分（包括html，css和javascript代碼）。再做一個html（基本上啥也沒有），這個html就是一個頁面容器，需要放哪個元件時，直接引入就行。跳轉時，直接跳轉元件就行。當需要加載某個元件時，js會動态建立這些元件裡的HTML，CSS。

優點

減輕伺服器壓力。伺服器隻用出資料就可以，不用管展示邏輯和頁面合成，吞吐能力會提高幾倍；

有良好的互動體驗。能提升頁面切換體驗，使用者在通路應用頁面是不會頻繁的去切換浏覽頁面，進而避免了頁面的重新加載。

單頁面是一次性把web應用的所有代碼（HTML，JavaScript和CSS）全部請求過來，有時候考慮到首屏加載太慢會按需加載。這樣一來，以後使用者的每一個動作都不會重新加載頁面（即不用再問伺服器要頁面的HTML慢，css和js代碼），取而代之的是利用 JavaScript 動态的變換HTML的内容（這不需要和伺服器互動，除非資料是動态，那麼隻需要問伺服器要資料即可）。

缺點

前進、後退管理。由于單頁Web應用在一個頁面中顯示所有的内容，是以不能使用浏覽器的前進後退功能。

配置好路由資訊，通過記錄浏覽過的曆史路由資訊，可以很好的記錄或曆史檢視過的界面，也可以獨立寫個足迹功能實作。

首屏加載(初次加載)耗時多。為實作單頁Web應用功能及顯示效果，需要在加載頁面的時候将JavaScript、CSS統一加載，部分頁面可以在需要的時候加載。是以必須對JavaScript及CSS代碼進行合并壓縮處理；

SEO難度較高。SEO差的原因是因為頁面中的内容都是靠js渲染出來了，在百度或者goole這樣的搜素引擎當中，排名會比較差。

項目是由多個完整的頁面組成。多頁面跳轉重新整理所有資源，每個公共資源(js、css等)需選擇性重新加載。

有利于seo。

首屏加載加載快。

頁面切換慢。資源共用(html、css,js)不共享，不共用，每個頁面都需要加載。

頁面重複代碼多。

單頁面應用（SinglePage Web Application，SPA）

多頁面應用（MultiPage Application，MPA）

組成

一個外殼頁面和多個頁面片段組成

多個完整頁面構成

資源共用(css,js)

共用，隻需在外殼部分加載

不共用，每個頁面都需要加載

重新整理方式

頁面局部重新整理或更改

整頁重新整理

url 模式

a.com/#/pageone

a.com/pageone.html

使用者體驗

頁面片段間的切換快，使用者體驗良好

頁面切換加載緩慢，流暢度不夠，使用者體驗比較差

轉場動畫

容易實作

無法實作

資料傳遞

依賴 url傳參、或者cookie 、localStorage等