單頁面SPA

原理：一個(gè)網(wǎng)站 就一個(gè) index.html，后續(xù) 路由的切換，本質(zhì)是 JS動(dòng)態(tài)渲染組件(DOM元素)。

好處：路由的切換，不需要下載/加載 新的 html 文件，頁面的切換速度快。

壞處：

無法被 SEO（原因：搜索引擎 搜索/爬蟲 的原理是搜索 html文件中的 DOM元素，而 單頁面應(yīng)用 中 html中 幾乎沒有 DOM元素，而是 JS動(dòng)態(tài)渲染出來的DOM元素）

單頁面應(yīng)用，首屏加載速度，可能會(huì)比較慢。(原因：單頁面應(yīng)用是 首屏加 JS都下載到瀏覽器中，后續(xù) JS渲染，所以 首屏可能下載很多的 JS代碼，所以 首屏加載速度會(huì)相對(duì)慢)

SPA 路由跳轉(zhuǎn)的技術(shù)方案

哈希路由：

好處：不需要 后端配置，前端能直接使用

壞處： url 中，有 `#`

?history路由：

好處： url 中，沒有 `#`

壞處：將前端代碼 發(fā)布至服務(wù)器上，需要 后端進(jìn)行配置。

多頁面MPA

原理：一個(gè)網(wǎng)站，每個(gè) 路由 對(duì)應(yīng)一個(gè) `xxx.html` 文件，切換路由就是 從新后服務(wù)器上下載 對(duì)應(yīng)的 html 文件。

好處：一個(gè)網(wǎng)站，每個(gè) 路由 對(duì)應(yīng)一個(gè) `xxx.html` 文件，切換路由就是 從新后服務(wù)器上下載 對(duì)應(yīng)的 html 文件。

壞處：

每切換一個(gè)路由，都需要下載 新的 html 文件；則網(wǎng)絡(luò)比較差的時(shí)候，會(huì)影響頁面切換速度。

多頁面應(yīng)用 無法 做到 單頁面應(yīng)用的 「局部刷新」。