单页应用（SPA）
一.單頁應(yīng)用
? ? ? ?單頁應(yīng)用的說法是在 JavaScript 和 AJAX 技術(shù)比較成熟,以后才出現(xiàn)的,指的是通過瀏覽器訪問一個網(wǎng)站時，只需要加載一個入口頁面，此后顯示的內(nèi)容和數(shù)據(jù)居都不會再刷新瀏覽器頁面。有了單頁應(yīng)用之后，傳統(tǒng)的網(wǎng)站就被稱為多頁應(yīng)用了。
二.單頁應(yīng)用和多頁應(yīng)用的區(qū)別?
? ? ? ?單頁應(yīng)用(single page application，SPA)將所有內(nèi)容放在一個頁面中，從而使整個頁面更加流暢。就用戶體驗而言，單擊導(dǎo)航可以定位錨點，快速定位相應(yīng)的部分，并輕松上下滾動。單頁應(yīng)用提供的信息和一些主要內(nèi)容已經(jīng)過篩選和控制，可以簡單、方便地閱讀和瀏覽。
? ? ? ?多頁應(yīng)用(multi-page application，MPA)是指包含多個獨立頁面的應(yīng)用，其中的每個頁面都必須重復(fù)加載 JS、CSS 等相關(guān)資源。多頁應(yīng)用在跳轉(zhuǎn)時，需要刷新整頁資源。
三.單頁應(yīng)用和多頁應(yīng)用
| ? ? ? ? ? ? ? ? ? ? ? ? ? 單頁應(yīng)用 | ? ? ? ? ? ? ? ? ? ? 多頁應(yīng)用 | |
| 頁面結(jié)構(gòu)? | 一個頁面 + 許多模塊的組件? | ?很多完整頁面? |
| 體驗效果 | ?頁面切換流暢，體驗效果佳? | 頁面切換慢，網(wǎng)速不好的時候，體驗效果很不好 |
| 資源文件 | ?公共資源只需要加載一次? | 每個頁面都要加載一次公共資源? |
| 路由模式 | 可以使用 hash，也可以使用 history | 使用普通鏈接進行跳轉(zhuǎn)? |
| 適用場景 | 對體驗效果和流暢度有較高要求的應(yīng)用不利于 SEO(搜索引擎優(yōu)化，可借助服務(wù)器端渲染技術(shù)優(yōu)化 SEO)? | 適用于對?SEO 有較高要求的應(yīng)用? |
| 內(nèi)容更新 | 相關(guān)組件的切換，僅局部更新? | 整體 HTML 的切換 |
| 相關(guān)成本 | ?前期開發(fā)成本較高，后期維護較為容易? | ? 前期開發(fā)成本低，后期維護比較麻煩，可能一個功能就需要改很多地方 |
? ? ? 多頁應(yīng)用用最大的特點：每次跳轉(zhuǎn)到一個新頁面時，都會有一段短暫的白屏?xí)r間，即使網(wǎng)速再快，也不能完全消除這段白屏?xí)r間。
? ? ? 單頁應(yīng)用則不會出現(xiàn)白屏問題，頁面之間的跳轉(zhuǎn)、頁面內(nèi)部內(nèi)容的更新，都會非常流暢，從而極大提升了用戶體驗。
總結(jié)
