SPA 與 MPA 的差異比較
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
什麼是 MPA (Multi-Page Application)
MPA 指的是一般傳統的開發方式,有幾個頁面就製作幾個 HTML 檔案,後端程式語言通常會使用 PHP, ASP, Java, Ruby 或 Python … 等。當頁面越多越複雜時 Client 端跟 Server 端就要傳遞越多次資料。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
什麼是 SPA (Single-Page Application)
SPA 顧名思義整個網站只有一個頁面,透過 AJAX 技術處理讓頁面在送出資料且收到 Server 的回覆後,只針對需要更新的元件來更新。
Image Not Showing
Possible Reasons
- The image file may be corrupted
- The server hosting the image is unavailable
- The image path is incorrect
- The image format is not supported
Learn More →
項目 |
MPA |
SPA |
頁面組成 |
多個頁面構成 |
單一頁面和多個頁面片段構成 |
頁面切換方式 |
整頁刷新 |
JS 局部刷新 |
頁面切換時間 |
慢 |
快 |
第一次進站時間 |
快 |
慢 |
共用資源重新載入 |
是 |
否 |
用戶體驗* |
差 |
佳 |
轉場動畫 |
無法實現 |
容易實現 |
頁面間的資料傳遞 |
依賴 URL, Cookie, localStorage,較麻煩 |
因為在同一個頁面中,較容易實現 |
SEO |
可以直接做 |
需搭配其他解決方案,較麻煩 |
適用專案 |
較依賴 SEO 的網站 |
對行動裝置體驗要求較高的網站 |
參考來源