單頁應用和多頁應用

2021-09-12 03:21:17 字數 1108 閱讀 7032

每一次頁面跳轉的時候,後台伺服器都會給返回乙個新的html文件,這種型別的**也就是多頁**,也叫做多頁應用。

為什麼多頁應用的首屏時間快?

首屏時間叫做頁面首個螢幕的內容展現的時間,當我們訪問頁面的時候,伺服器返回乙個html,頁面就會展示出來,這個過程只經歷了乙個http請求,所以頁面展示的速度非常快。

為什麼搜尋引擎優化效果好(seo)?

搜尋引擎在做網頁排名的時候,要根據網頁內容才能給網頁權重,來進行網頁的排名。搜尋引擎是可以識別html內容的,而我們每個頁面所有的內容都放在html中,所以這種多頁應用,seo排名效果好。

但是它也有缺點,就是切換慢

因為每次跳轉都需要發出乙個http請求,如果網路比較慢,在頁面之間來回跳轉時,就會發現明顯的卡頓。

第一次進入頁面的時候會請求乙個html檔案,重新整理清除一下。切換到其他元件,此時路徑也相應變化,但是並沒有新的html檔案請求,頁面內容也變化了。

原理是:js會感知到url的變化,通過這一點,可以用js動態的將當前頁面的內容清除掉,然後將下乙個頁面的內容掛載到當前頁面上,這個時候的路由不是後端來做了,而是前端來做,判斷頁面到底是顯示哪個元件,清除不需要的,顯示需要的元件。這種過程就是單頁應用,每次跳轉的時候不需要再請求html檔案了。

為什麼頁面切換快?

頁面每次切換跳轉時,並不需要做html檔案的請求,這樣就節約了很多http傳送時延,我們在切換頁面的時候速度很快。

缺點:首屏時間慢,seo差

有這些缺點,為什麼還要使用vue呢?

vue還提供了一些其它的技術來解決這些缺點,比如說伺服器端渲染技術(我是ssr),通過這些技術可以完美解決這些缺點,解決完這些問題,實際上單頁面應用對於前端來說是非常完美的頁面開發解決方案。

單頁應用 vs 多頁應用

web專案可分為單頁應用 和 多頁應用。單頁應用,就是只有乙個頁面,其他內容,估計就是動態載入,用從載入其他頁面片段 請求後台 這種方式來完成。這麼一說,我之前做的,其實都是多頁應用。相比之下,單頁應用的優勢是什麼呢?1 頁面切換非常快,不會出現白屏,還可以作出過渡效果 2 公用的js和css一次性...

單頁應用(SPA)和 多頁應用(MPA)

第一次進入頁面的時候會請求乙個html檔案,重新整理清除一下。切換到其他元件,此時路徑也相應變化,但是並沒有新的html檔案請求,頁面內容也變化了。原理 js會感知到url的變化,通過這一點,可以用js動態的將當前頁面的內容清除掉,然後將下乙個頁面的內容掛載到當前頁面上,這個時候的路由不是後端來做了...

6 4 多頁應用與單頁應用

每一次頁面的跳轉,後端都會返回乙個新的html檔案 首屏 頁面首個螢幕的內容展現出來的時間,因為訪問頁面的時候,伺服器返回html,然後頁面就會被展示出來,這個過程只經歷了乙個http請求,所以頁面展示的速度非常快 搜尋引擎是可以識別html中的內容的,而我們每乙個頁面,所有的內容都放在html中 ...