多頁面與單頁面應用的區別
阿新 • • 發佈:2018-12-11
雖然接觸web開發有一段時間了,但從頭開始構建一個完整的web專案的機會非常少,對於一些概念還很模糊,今天首先來梳理一下在應用開發中,單頁面應用和多頁面應用的區別。
其實從字面意思上理解,就很好理解了。
單頁面,顧名思義只有一個介面。
介面是通過URL來定位的,所以單頁面應用從頭到尾它的html地址都是不變的,注意哦,是html地址,而不是URL地址,這兩者還是有點區別的。html地址是截止到.html的介面地址,比如:http://about.html#setting這個地址中,html地址是http://about.html,而完整的URL是http://about.html#setting。
而多頁面應用,顧名思義就是多個介面間的跳轉,會伴隨著html地址的改變。
在單頁面應用中,通常是由一個外部框架和一個一個元件組成的,介面之間的切換其實就是元件的移除和新組建的新增。
在多頁面中,則可以看到導航欄中地址的變化,是從一個完整的頁面跳轉到另一個完整的頁面(注意區分頁面和介面)。
思考:帶iframe的介面算是單頁面還是多頁面?
下面是詳細的區別(原文地址:https://www.jianshu.com/p/4c9c29967dd6)
對比項 | 多頁面應用 | 單頁面應用 |
應用構成 | 由多個完整頁面構成 | 一個外殼頁面和多個元件構成 |
跳轉方式 | 頁面之間的跳轉是從一個頁面跳轉到另一個頁面 | 頁面片段之間的跳轉是把一個頁面片段刪除或隱藏,載入另一個頁面片段並顯示出來。這是片段之間的模擬跳轉,並沒有開新頁面 |
跳轉後公共資源是否重新載入 | 是 | 否 |
URL模式 | http://xxx/page1.html 和 http://xxx/page2.html | http://xxx/shell.html#page1 和 http://xxx/shell.html#page2 |
使用者體驗 | 頁面間切換載入慢,不流暢,使用者體驗差,特別是在移動裝置上 | 頁面片段間的切換快,使用者體驗好,包括在移動裝置上 |
能否實現轉場動畫 | 無法實現 | 容易實現(手機app 動效) |
搜尋引擎優化SEO | 可以直接做 | 需要單獨方案做,有點麻煩 |
特別適用的範圍 | 需要對搜尋引擎友好的網站 | 對體驗要求高的應用,特別是移動應用 |
開發難度 | 低一些,框架選擇容易 | 高一些,需要專門的框架來降低這種模式的開發難度 |