SPA和MPA網站區別,SEO優缺點剖析,甚麼時候該用那個? | single page application網站
就最近三,四年,網站開發業界"進化"的非常快,最多網站開發人員討論的莫過於是SPA和MPA。 SPA和MPA英文全寫和中文翻譯分別是 Single-PageApplication單頁面應用 Multi-PageApplication多頁面應用 這次我就來跟你講解下 SPA和MPA網站應用運作上有甚麼特點? SPA和MPA的網站應用兩者優缺點剖析 甚麼時候應選SPA或MPA去做網站應用 MPA網站應用運作特點 我想先解釋MPA,因為傳統的網站開發都是以MPA為主,亦是兩者之中比較容易理解的一個。 每當你在MPA網站點去另一頁時,你的網頁瀏...
就最近三,四年,網站開發業界"進化"的非常快,最多網站開發人員討論的莫過於是SPA和MPA。
SPA和MPA英文全寫和中文翻譯分別是
Single-Page Application 單頁面應用 Multi-Page Application 多頁面應用 這次我就來跟你講解下 SPA和MPA網站應用運作上有甚麼特點? SPA和MPA的網站應用兩者優缺點剖析 甚麼時候應選SPA或MPA去做網站應用 MPA網站應用運作特點我想先解釋MPA,因為傳統的網站開發都是以MPA為主,亦是兩者之中比較容易理解的一個。
每當你在MPA網站點去另一頁時,你的網頁瀏覽器會將整頁,連同導航菜單,主要內容,CSS/Javascript網站資源等所有東西,從頭到尾的刷新一遍(reload)來讓你到達新頁面。
每次到達新頁時面,網頁瀏覽器都可以取得該新頁的完整代碼,包括實質性內容,如下圖 就算不懂代碼都可以清楚讀懂這些實質內容。
總括MPA網站應用主要特點為
由於內容代碼完整,網頁搜引器例如Google的網頁爬蟲就能夠輕鬆讀取你網站內容然後放到適當的搜尋結果中,所以MPA對SEO[1]是很友好的 到新頁時網站會從頭到尾,整頁刷新一次 每到訪新頁,網頁瀏覽器都可以取得該新頁完整內容代碼我這個用PHP[2]寫成的部落格,或者是類似Amazon這種網購站,都是MPA的例子。
SPA網站應用運作特點要了解SPA網站應用運作主要看首次訪問網站和往後互動這兩部份。
首次訪問SPA網站時,網站運作原理與MPA差不多,會得到一個網頁代碼,但是碼代中只包括了類似下圖的網頁的基本框架 你可以看到除了點一小堆代碼外並沒有實際文字呀,圖片等內容。實際內容要依靠框架代碼內的一個Javascript(上圖中的app.js)檔案再去取得,這個JS檔案裏有指令幫助嵌入或請求實際內容。