1. 程式人生 > >多頁面與單頁面應用的區別

多頁面與單頁面應用的區別

雖然接觸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 可以直接做 需要單獨方案做,有點麻煩
特別適用的範圍 需要對搜尋引擎友好的網站 對體驗要求高的應用,特別是移動應用
開發難度 低一些,框架選擇容易 高一些,需要專門的框架來降低這種模式的開發難度