快捷導(dǎo)航

vue 單頁(yè)應(yīng)用和多頁(yè)應(yīng)用的優(yōu)劣

更新時(shí)間：2020年10月22日 09:24:48 作者：八寶君

這篇文章主要介紹了vue 單頁(yè)應(yīng)用和多頁(yè)應(yīng)用的優(yōu)劣，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下

多頁(yè)應(yīng)用

每一次頁(yè)面跳轉(zhuǎn)的時(shí)候，后臺(tái)服務(wù)器都會(huì)給返回一個(gè)新的html文檔，這種類型的網(wǎng)站也就是多頁(yè)網(wǎng)站，也叫做多頁(yè)應(yīng)用。

為什么多頁(yè)應(yīng)用的首屏?xí)r間快？

首屏?xí)r間叫做頁(yè)面首個(gè)屏幕的內(nèi)容展現(xiàn)的時(shí)間，當(dāng)我們?cè)L問(wèn)頁(yè)面的時(shí)候，服務(wù)器返回一個(gè)html，頁(yè)面就會(huì)展示出來(lái)，這個(gè)過(guò)程只經(jīng)歷了一個(gè)HTTP請(qǐng)求，所以頁(yè)面展示的速度非?？臁?/p>

為什么搜索引擎優(yōu)化效果好（SEO）？

搜索引擎在做網(wǎng)頁(yè)排名的時(shí)候，要根據(jù)網(wǎng)頁(yè)內(nèi)容才能給網(wǎng)頁(yè)權(quán)重，來(lái)進(jìn)行網(wǎng)頁(yè)的排名。搜索引擎是可以識(shí)別html內(nèi)容的，而我們每個(gè)頁(yè)面所有的內(nèi)容都放在Html中，所以這種多頁(yè)應(yīng)用，seo排名效果好。

但是它也有缺點(diǎn)，就是切換慢

因?yàn)槊看翁D(zhuǎn)都需要發(fā)出一個(gè)http請(qǐng)求，如果網(wǎng)絡(luò)比較慢，在頁(yè)面之間來(lái)回跳轉(zhuǎn)時(shí)，就會(huì)發(fā)現(xiàn)明顯的卡頓。

單頁(yè)應(yīng)用

第一次進(jìn)入頁(yè)面的時(shí)候會(huì)請(qǐng)求一個(gè)html文件，刷新清除一下。切換到其他組件，此時(shí)路徑也相應(yīng)變化，但是并沒(méi)有新的html文件請(qǐng)求，頁(yè)面內(nèi)容也變化了。
原理是：JS會(huì)感知到url的變化，通過(guò)這一點(diǎn)，可以用js動(dòng)態(tài)的將當(dāng)前頁(yè)面的內(nèi)容清除掉，然后將下一個(gè)頁(yè)面的內(nèi)容掛載到當(dāng)前頁(yè)面上，這個(gè)時(shí)候的路由不是后端來(lái)做了，而是前端來(lái)做，判斷頁(yè)面到底是顯示哪個(gè)組件，清除不需要的，顯示需要的組件。這種過(guò)程就是單頁(yè)應(yīng)用，每次跳轉(zhuǎn)的時(shí)候不需要再請(qǐng)求html文件了。

為什么頁(yè)面切換快？

頁(yè)面每次切換跳轉(zhuǎn)時(shí)，并不需要做html文件的請(qǐng)求，這樣就節(jié)約了很多http發(fā)送時(shí)延，我們?cè)谇袚Q頁(yè)面的時(shí)候速度很快。

缺點(diǎn)：首屏?xí)r間慢，SEO差

單頁(yè)應(yīng)用的首屏?xí)r間慢，首屏?xí)r需要請(qǐng)求一次html，同時(shí)還要發(fā)送一次js請(qǐng)求，兩次請(qǐng)求回來(lái)了，首屏才會(huì)展示出來(lái)。相對(duì)于多頁(yè)應(yīng)用，首屏?xí)r間慢。
SEO效果差，因?yàn)樗阉饕嬷徽J(rèn)識(shí)html里的內(nèi)容，不認(rèn)識(shí)js的內(nèi)容，而單頁(yè)應(yīng)用的內(nèi)容都是靠js渲染生成出來(lái)的，搜索引擎不識(shí)別這部分內(nèi)容，也就不會(huì)給一個(gè)好的排名，會(huì)導(dǎo)致單頁(yè)應(yīng)用做出來(lái)的網(wǎng)頁(yè)在百度和谷歌上的排名差。

有這些缺點(diǎn)，為什么還要使用Vue呢？

Vue還提供了一些其它的技術(shù)來(lái)解決這些缺點(diǎn)，比如說(shuō)服務(wù)器端渲染技術(shù)(我是SSR)，通過(guò)這些技術(shù)可以完美解決這些缺點(diǎn)，解決完這些問(wèn)題，實(shí)際上單頁(yè)面應(yīng)用對(duì)于前端來(lái)說(shuō)是非常完美的頁(yè)面開(kāi)發(fā)解決方案。

新的更新

最近在改造公司的項(xiàng)目，公司的項(xiàng)目是單頁(yè)應(yīng)用，可能會(huì)改成多頁(yè)應(yīng)用，所以對(duì)這塊又重新看了一下。在網(wǎng)上看到一個(gè)表格覺(jué)得總結(jié)的很到位，貼過(guò)來(lái)。我是表格出處

mm	多頁(yè)應(yīng)用模式MPA	單頁(yè)應(yīng)用模式SPA
應(yīng)用構(gòu)成	由多個(gè)完整頁(yè)面構(gòu)成	一個(gè)外殼頁(yè)面和多個(gè)頁(yè)面片段構(gòu)成
跳轉(zhuǎn)方式	頁(yè)面之間的跳轉(zhuǎn)是從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面	頁(yè)面片段之間的跳轉(zhuǎn)是把一個(gè)頁(yè)面片段刪除或隱藏，加載另一個(gè)頁(yè)面片段并顯示出來(lái)。這是片段之間的模擬跳轉(zhuǎn)，并沒(méi)有開(kāi)殼頁(yè)面
跳轉(zhuǎn)后公共資源是否重新加載	是	否
URL模式	http://xxx/page1.html http://xxx/page1.html	http://xxx/shell.html#page1 http://xxx/shell.html#page2
用戶體驗(yàn)	頁(yè)面間切換加載慢，不流暢，用戶體驗(yàn)差，特別是在移動(dòng)設(shè)備上	頁(yè)面片段間的切換快，用戶體驗(yàn)好，包括在移動(dòng)設(shè)備上
能否實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫(huà)	無(wú)法實(shí)現(xiàn)	容易實(shí)現(xiàn)（手機(jī)app動(dòng)效）
頁(yè)面間傳遞數(shù)據(jù)	依賴URL、cookie或者localstorage，實(shí)現(xiàn)麻煩	因?yàn)樵谝粋€(gè)頁(yè)面內(nèi)，頁(yè)面間傳遞數(shù)據(jù)很容易實(shí)現(xiàn)
搜索引擎優(yōu)化（SEO）	可以直接做	需要單獨(dú)方案做，有點(diǎn)麻煩
特別適用的范圍	需要對(duì)搜索引擎友好的網(wǎng)站	對(duì)體驗(yàn)要求高的應(yīng)用，特別是移動(dòng)應(yīng)用
搜索引擎優(yōu)化（SEO）	可以直接做	需要單獨(dú)方案做，有點(diǎn)麻煩
開(kāi)發(fā)難度	低一些，框架選擇容易	高一些，需要專門(mén)的框架來(lái)降低這種模式的開(kāi)發(fā)難度