上月面試海康威視的一道面試題。
單頁應用，即常說的SPA，Single Page Application，從名稱上就可以看出它最大的特點，就是單頁面，即只有一個頁面；相對的就是多頁面，即MPA，Multi-Page Application。
在多頁面的情況下，我們在切換不同頁面時，需要向伺服器傳送多次請求來獲取不同頁面內容，在獲取到內容後，整個瀏覽器視口需要被重新渲染，而等待伺服器的響應需要一定的時間，這個時間受網路狀況影響很大，如果網路出現波動，就需要長時間地等待響應，頁面也會處於空白的狀態，有時使用者也不知道是網速慢還是請求內容過多，沒有給使用者一個反饋。
SPA就相對上述MPA的的缺點有一些優勢：
- 單頁面切換內容時，利用了前端路由技術，在視覺上切換頁面的過程中，不需要向伺服器發起請求，也就不用等待響應結果，使得互動體驗更流暢；
- 得益於前端路由技術和ajax技術，在切換頁面內容的過程中，只需要區域性重新整理頁面，大大提升了互動效率；
- 前端可以有更多空間提升使用者體驗，比如使用者等待頁面載入的過程中，可以設計一些互動，比如loading或者進度條，向使用者反饋載入狀態；
- 可以承擔部分的資料處理工作，減輕伺服器壓力；
- 總體來說就是，快速渲染、及時反饋；
- 另外還可以模擬近似客戶端應用的體驗，應用體積卻小得多，對記憶體偏小的手機較友好，同時也可以減少跨平臺開發的成本。
雖然SPA有諸多優點，但也存在一些明顯缺點：
- 由於承擔起了頁面切換的工作，即增加了前端路由功能，首先前端程式碼量就不可避免的增加，這往往就會導致前端專案打包體積變大，影響應用首次載入的使用者體驗，可能會出現白屏
- 不利於SEO（搜尋引擎最佳化），因為網路爬蟲更擅長靜態資源的抓取和分析，而單頁應用中大部分內容都是根據路由動態生成的，或者根據ajax獲取的
- 在模擬客戶端應用的時候，會相對而言耗費更多的網路資源，比如客戶端的靜態資源（圖片）就在本地，而前端需要這些資源時需要另外去請求
針對上述缺點的一些解決方案：
- 在包體積過大的情況下
首先是儘可能壓縮資源，其次可以採取拆分的技術，比如在webpack中普通的構建會把樣式程式碼也插入js檔案中，可以使用外掛把樣式程式碼輸出到一個單獨的檔案中；再比如構建程式碼時將不同模組輸出到不同檔案，運用懶載入，使得首次載入時只載入首屏部分的內容，而不是將整個應用的內容都請求過來，這雖然會引起像前面所說的MPA同樣的問題，切換路由時要向伺服器發起請求，但是前端可以設計適當的互動，使得使用者在等待的過程中有更好的體驗；當然如果專案實在過於龐大，可以考慮將專案進行拆分，運用微前端之類的技術。 - 針對SEO的最佳化，可以使用預渲染，使構建生成的HMTL檔案包含所需的網站資訊；或者使用SSR服務端渲染，在使用者請求時將動態生成的完整的HTML返回給客戶端瀏覽器，這還可以加快首屏載入速度，但這會犧牲一部分互動體驗
- 針對模擬客戶端應用時需要另外請求靜態資源，這難以避免，可以儘量去壓縮資源體積以加快響應速度；或者利用CDN，以加速請求
當然很多時候並沒有完美的解決方案，只有更適用的場景。
偏展示性的網站，比如公司官網，因為主要向使用者展示公司資訊，需要使用者等待的操作較少，更推薦使用SSR，也利於SEO，利於搜尋引擎收錄；而使用者後臺這類，大多是需要登入操作的，資訊往往是不公開的，也就不需要收錄，所以不需要SEO的最佳化，就可以放心的使用客戶端渲染；移動端因為存在網速限制，對包體積過大的情況比較敏感，所以有必要做好處理。