多頁(yè)面應(yīng)用:每次頁(yè)面跳轉(zhuǎn),后臺(tái)都會(huì)返回一個(gè)新的HTML文檔,就是多頁(yè)面應(yīng)用。
在以往傳統(tǒng)開(kāi)發(fā)的應(yīng)用(網(wǎng)站)大多都是多頁(yè)面應(yīng)用,路由由后端來(lái)寫(xiě)。
優(yōu)勢(shì)與劣勢(shì):
首屏?xí)r間快: 訪(fǎng)問(wèn)頁(yè)面,服務(wù)器只需要返回一個(gè)HTML文件,這個(gè)過(guò)程就經(jīng)歷了一個(gè)HTTP請(qǐng)求,請(qǐng)求響應(yīng)回來(lái),頁(yè)面就能被展示出來(lái)。
SEO(搜索引擎排名)效果好: 搜索引擎能識(shí)別HTML的內(nèi)容,根據(jù)內(nèi)容進(jìn)行排名。
頁(yè)面切換慢:每一次切換頁(yè)面都需要發(fā)起一個(gè)HTTP請(qǐng)求,整個(gè)網(wǎng)頁(yè)要全部刷新, 假設(shè)網(wǎng)絡(luò)較慢就會(huì)出現(xiàn)卡頓情況。
單頁(yè)應(yīng)用:用vue寫(xiě)的項(xiàng)目是單頁(yè)應(yīng)用,刷新頁(yè)面會(huì)請(qǐng)求一個(gè)HTML文件,切換頁(yè)面的時(shí)候,并不會(huì)發(fā)起新的請(qǐng)求一個(gè)HTML文件,只是頁(yè)面 局部 內(nèi)容發(fā)生了變化
vue.js原理:JS感知URL變化,當(dāng)URL發(fā)生變化后,使用JS動(dòng)態(tài)把當(dāng)前的局部頁(yè)面內(nèi)容清除掉,再把下一個(gè)頁(yè)面的內(nèi)容掛載到頁(yè)面上。此時(shí)的路由就不是后端來(lái)做了,而是前端來(lái)做,判斷頁(yè)面到底顯示哪一個(gè)組件,再把以前的組件清除掉使用新的組件。就不會(huì)每一次跳轉(zhuǎn)都請(qǐng)求HTML文件。
優(yōu)勢(shì)與劣勢(shì):
首屏?xí)r間慢: 請(qǐng)求HTML還有JS的請(qǐng)求, 以及VUE的渲染過(guò)程
頁(yè)面切換快: 頁(yè)面跳轉(zhuǎn)不需要去做HTML文件的請(qǐng)求,節(jié)約HTTP請(qǐng)求發(fā)送的時(shí)延。
SEO差: 搜索引擎只認(rèn)識(shí)HTML內(nèi)容不認(rèn)識(shí)JS內(nèi)容。單頁(yè)應(yīng)用的渲染都是靠JavaScript渲染出來(lái)的。搜索引擎不好識(shí)別排名。