單頁應用和多頁應用

多頁面應用

一個項目是由多個完整的html頁面組成，

每一次頁面跳轉的時候，後臺服務器都會給返回一個新的HTML文檔，頁面跳轉全部的資源都要從新加載，頁面之間的切換會出現卡頓空白的問題，不容易實現切換動畫等。這種類型的網站也就是多頁網站，也叫作多頁應用。

爲何多頁應用的首屏時間快？

首屏時間叫作頁面首個屏幕的內容展示的時間，當咱們訪問頁面的時候，服務器返回一個html，頁面就會展現出來，這個過程只經歷了一個HTTP請求，因此頁面展現的速度很是快。

爲何搜索引擎優化效果好（SEO）？

搜索引擎在作網頁排名的時候，要根據網頁內容才能給網頁權重，來進行網頁的排名。搜索引擎是能夠識別html內容的，而咱們每一個頁面全部的內容都放在Html中，因此這種多頁應用，seo排名效果好。

可是它也有缺點，就是切換慢

由於每次跳轉都須要發出一個http請求，若是網絡比較慢，在頁面之間來回跳轉時，就會發現明顯的卡頓。

 

單頁面應用

一個項目中只有一個完整的html頁面，其餘的都是部分的html片斷組成。頁面跳轉只是局部刷新，不會從新加載所有資源。片斷之間的切換快，比較容易實現轉場動畫。

第一次進入頁面的時候會請求一個HTML文件，刷新清除一下。切換到其餘組件，此時路徑也相應變化，可是並無新的HTML文件請求，頁面內容也變化了。

 

原理是：JS會感知到url的變化，經過這一點，能夠用js動態的將當前頁面的內容清除掉，而後將下一個頁面的內容掛載到當前頁面上，這個時候的路由不是後端來作了，而是前端來作，判斷頁面究竟是顯示哪一個組件，清除不須要的，顯示須要的組件。這種過程就是單頁應用，每次跳轉的時候不須要再請求html文件了。

 

爲何頁面切換快？

頁面每次切換跳轉時，並不須要作html文件的請求，這樣就節約了不少http發送時延，咱們在切換頁面的時候速度很快。

缺點：首屏時間慢，SEO差

單頁應用的首屏時間慢，首屏時須要請求一次html，同時還要發送一次js請求，兩次請求回來了，首屏纔會展現出來。相對於多頁應用，首屏時間慢。
SEO效果差，由於搜索引擎只認識html裏的內容，不認識js的內容，而單頁應用的內容都是靠js渲染生成出來的，搜索引擎不識別這部份內容，也就不會給一個好的排名，會致使單頁應用作出來的網頁在百度和谷歌上的排名差。

有這些缺點，爲何還要使用Vue呢？

Vue還提供了一些其它的技術來解決這些缺點，好比說服務器端渲染技術(我是SSR)，經過這些技術能夠完美解決這些缺點，解決完這些問題，實際上單頁面應用對於前端來講是很是完美的頁面開發解決方案。

單頁面VS多頁面

 

mm	多頁應用模式MPA	單頁應用模式SPA
應用構成	由多個完整頁面構成	一個外殼頁面和多個頁面片斷構成
跳轉方式	頁面之間的跳轉是從一個頁面跳轉到另外一個頁面	頁面片斷之間的跳轉是把一個頁面片斷刪除或隱藏，加載另外一個頁面片斷並顯示出來。這是片斷之間的模擬跳轉，並無開殼頁面
跳轉後公共資源是否從新加載	是	否
URL模式	http://xxx/page1.html 和 http://xxx/page2.html	http://xxx/shell.html#page1 和 http://xxx/shell.html#page2
用戶體驗	頁面間切換加載慢，不流暢，用戶體驗差，特別是在移動設備上	頁面片斷間的切換快，用戶體驗好，包括在移動設備上
可否實現轉場動畫	沒法實現	容易實現（手機app動效）
頁面間傳遞數據	依賴URL、cookie或者localstorage，實現麻煩	由於在一個頁面內，頁面間傳遞數據很容易實現(這裏是我補充，父子之間傳值，或vuex或storage之類)
搜索引擎優化（SEO）	能夠直接作	須要單獨方案作，有點麻煩
特別適用的範圍	須要對搜索引擎友好的網站	對體驗要求高的應用，特別是移動應用
搜索引擎優化（SEO）	能夠直接作	須要單獨方案作，有點麻煩
開發難度	低一些，框架選擇容易	高一些，須要專門的框架來下降這種模式的開發難度

 

 

原文出處：https://www.cnblogs.com/ranyonsue/p/10115297.html