?傳統(tǒng)的網(wǎng)站會(huì)不斷跳轉(zhuǎn)頁(yè)面， 例如單擊搜索后會(huì)跳轉(zhuǎn)頁(yè)面，單擊翻頁(yè)后會(huì)跳轉(zhuǎn)頁(yè)面， 而一旦出現(xiàn)跳轉(zhuǎn)頁(yè)面，用戶就需要等待重新加載頁(yè)面后才能繼續(xù)操作。

為了改進(jìn)這種糟糕體驗(yàn)，單頁(yè)應(yīng)用的概念逐漸流行， 單頁(yè)應(yīng)用指的是在瀏覽器中運(yùn)行的應(yīng)用，使用期間不會(huì)重新加載頁(yè)面。 簡(jiǎn)單地說(shuō)，就是把多個(gè)頁(yè)面合成一個(gè)頁(yè)面，通過(guò)JavaScript腳本控制其元素的顯示。

?

下面，我們分別討論一下這4個(gè)核心問(wèn)題?

單頁(yè)應(yīng)用的工作原理是什么?

整個(gè)前端項(xiàng)目做成一個(gè)單頁(yè)應(yīng)用好嗎?

我們推薦的單頁(yè)應(yīng)用運(yùn)用方式是什么

使用Iframe實(shí)現(xiàn)偽單頁(yè)應(yīng)用?

1、單頁(yè)應(yīng)用的工作原理是什么

首先，我們先講單頁(yè)應(yīng)用的工作原理， 這里先明確一點(diǎn)，單頁(yè)應(yīng)用本身只是一個(gè)概念，其實(shí)就是把多個(gè)網(wǎng)頁(yè)合成一個(gè)網(wǎng)頁(yè)。 很多人會(huì)誤以為只有使用一些框架或工具才能實(shí)現(xiàn)單頁(yè)應(yīng)用（如vue-cli、react-cli、Angular2及后續(xù)版本） 。只因?yàn)樗鼈兲峁┝送陚涞哪K化、路由方案，所以使用這些工具開(kāi)發(fā)單頁(yè)應(yīng)用是相對(duì)容易的。但其實(shí)單頁(yè)應(yīng)用就是一個(gè)頁(yè)面，只不過(guò)是復(fù)雜的頁(yè)面 ，其基本技術(shù)還是Html、Css、JavaScript。

單頁(yè)應(yīng)用的工作原理 簡(jiǎn)單地說(shuō)，就是JavaScript監(jiān)聽(tīng)事件發(fā)生，當(dāng)事件發(fā)生后，JavaScript會(huì)控制頁(yè)面元素的顯示。

?

其具體的實(shí)現(xiàn)方式，有2種

1、通過(guò)交互事件控制?

2、通過(guò)路由控制

通過(guò)交互事件控制頁(yè)面元素的變化是相對(duì)普遍的做法 ，對(duì)于一些相似的頁(yè)面，如列表頁(yè)面、左導(dǎo)航右文章等頁(yè)面 這些頁(yè)面如果是點(diǎn)擊翻頁(yè)或者切換導(dǎo)航，頁(yè)面其實(shí)只有數(shù)據(jù)變化，而頁(yè)面布局是幾乎不變化的， 對(duì)于這些頁(yè)面，其實(shí)只需要監(jiān)聽(tīng)點(diǎn)擊或其他交互事件 ，然后向服務(wù)器請(qǐng)求新數(shù)據(jù)，最后替換數(shù)據(jù)就可以了。

但是對(duì)于元素布局及內(nèi)容完全不同的頁(yè)面之間，如列表頁(yè)和視頻播放頁(yè)， 如果要將這些頁(yè)面通過(guò)監(jiān)聽(tīng)交互事件的方式做成單頁(yè)應(yīng)用的話 ，則會(huì)變得很麻煩 ，對(duì)于這種場(chǎng)景，就可以通過(guò)路由的方式控制。

控制路由的方式，簡(jiǎn)單地說(shuō)，就是監(jiān)聽(tīng)URL的變化，來(lái)控制頁(yè)面元素的顯示。 路由的方式有hash和history 兩種。

hash方式的工作原理是，監(jiān)聽(tīng)瀏覽器地址的# 號(hào)部分的變化，以顯示頁(yè)面元素， 由于瀏覽器地址的# 號(hào)部分的變化是不會(huì)引起頁(yè)面跳轉(zhuǎn)的，所以在列表跳轉(zhuǎn)到播放頁(yè)面的時(shí)候仍然可以使用a標(biāo)簽。

history方式的工作原理是，使用history.pushState、history.replaceState等瀏覽器API去修改瀏覽器地址 ，用這些API修改瀏覽器地址的話，是不會(huì)引起頁(yè)面跳轉(zhuǎn)的 ，JavaScript監(jiān)聽(tīng)到瀏覽器地址變化后，會(huì)控制頁(yè)面元素的顯示。

2、整個(gè)前端項(xiàng)目做成一個(gè)單頁(yè)應(yīng)用好嗎?

接下來(lái)，我們討論整個(gè)項(xiàng)目做成一個(gè)單頁(yè)應(yīng)用真的好嗎 ？我們的答案是不好，尤其是中大型項(xiàng)目。

我們?cè)?jīng)參與過(guò)一個(gè)項(xiàng)目， 把300多個(gè)頁(yè)面做成一個(gè)單頁(yè)應(yīng)用， 本地打開(kāi)需要幾分鐘，性能差點(diǎn)的機(jī)器直接崩潰， 后面也做了一些優(yōu)化，如懶加載，分離子項(xiàng)目等， 性能有所提升，但是性能還是不好。

其實(shí)網(wǎng)頁(yè)本身就不適合做成應(yīng)用的模式， 網(wǎng)頁(yè)的優(yōu)點(diǎn)恰恰在于頁(yè)面分散，用戶無(wú)需像APP一樣下載安裝， 只需要在需要的時(shí)候再下載相關(guān)頁(yè)面就可以了。

單頁(yè)應(yīng)用概念的初衷是緩解不斷跳轉(zhuǎn)的糟糕體驗(yàn) ，如果極端地把整個(gè)項(xiàng)目做成一個(gè)單頁(yè)應(yīng)用 ，它就跟桌面應(yīng)用、APP沒(méi)有區(qū)別了， 需要長(zhǎng)時(shí)間的下載以換取流暢的體驗(yàn) ，再說(shuō)了，瀏覽器的內(nèi)存管理并沒(méi)有操作系統(tǒng)的好 ，一個(gè)內(nèi)容超多的網(wǎng)頁(yè)的性能也不會(huì)流暢。

那么，把整個(gè)項(xiàng)目做成一個(gè)單頁(yè)應(yīng)用 ，那還不如直接做成一個(gè)桌面應(yīng)用或者APP， 畢竟，現(xiàn)在也有很多成熟的跨平臺(tái)解決方案了。

所以，目前如果決定把整個(gè)個(gè)中大型項(xiàng)目做成一個(gè)單頁(yè)應(yīng)用的話 確實(shí)是比較魯莽的行為。

當(dāng)然，未來(lái)也不是說(shuō)不可能， 谷歌也在努力推動(dòng)Chrome操作系統(tǒng)，推動(dòng)網(wǎng)絡(luò)應(yīng)用的發(fā)展 但是，目前來(lái)看，不太現(xiàn)實(shí) 畢竟網(wǎng)頁(yè)做出來(lái)，是給現(xiàn)在的人用的?

3、我們推薦的單頁(yè)應(yīng)用運(yùn)用方式是什么

接下來(lái)，我們講一下我們推薦的單頁(yè)應(yīng)用的應(yīng)用方式 第一，我們不推薦把整個(gè)項(xiàng)目做成一個(gè)單頁(yè)應(yīng)用 第二，我們只推薦把一些相似的網(wǎng)頁(yè)做成一個(gè)單頁(yè)應(yīng)用。

例如，相似的列表頁(yè)可以做成單頁(yè)應(yīng)用，點(diǎn)擊翻頁(yè)、導(dǎo)航切換時(shí)， 只需要更換數(shù)據(jù)或一小部分頁(yè)面元素就可以了。

至于完全不同的頁(yè)面，如視頻列表頁(yè)和視頻播放頁(yè) ，則完全沒(méi)必要整合成單頁(yè)應(yīng)用，因?yàn)闉g覽器本身是有緩存機(jī)制的， 即使跳轉(zhuǎn)也不會(huì)花太長(zhǎng)時(shí)間。

另外，把不同的頁(yè)面分離還有一些好處， 如頁(yè)面性能可以單獨(dú)調(diào)整，而不是面對(duì)一大堆代碼無(wú)從下手。

最后，我們討論使用iframe實(shí)現(xiàn)偽單頁(yè)應(yīng)用 ，我們推薦不同的頁(yè)面需要分離開(kāi)來(lái) ，那么，如何更加便捷地組織這些頁(yè)面呢？

4、使用Iframe實(shí)現(xiàn)偽單頁(yè)應(yīng)用?

我們推薦使用iframe的方式組織這些頁(yè)面， 也就是偽單頁(yè)應(yīng)用的方式？這樣的話，用戶看到的頁(yè)面其實(shí)是兩層的， 上層是固定不變的，如頂部導(dǎo)航、用戶信息、提示框、提示信息、底部網(wǎng)頁(yè)地圖等 ，下層是通過(guò)Iframe加載的頁(yè)面。

這樣做的好處是，既可以減少固定元素和固定信息的重復(fù)加載 ，又可以很好地組織切換不同的頁(yè)面。這種方式是很多網(wǎng)站常用的做法 ，也是我們?cè)囼?yàn)下來(lái)比較好用的做法。

當(dāng)然，如果用這種方法的話，需要解決幾個(gè)問(wèn)題?

第一，是Iframe框需要根據(jù)內(nèi)容自動(dòng)變化高度，子頁(yè)面可以使用window.MutationObserver等方式監(jiān)聽(tīng)并修改父頁(yè)面的Iframe框高度 。

第二，是攔截a標(biāo)簽的跳轉(zhuǎn)，并通知上層導(dǎo)航找到真實(shí)的地址并替換iframe中的頁(yè)面，這樣，就可以使用頁(yè)面識(shí)別碼跳轉(zhuǎn)子頁(yè)面了。

?

我們的官網(wǎng)就是使用這種iframe方式做的， 體驗(yàn)上還是比較好的， 后續(xù)我們會(huì)整理相關(guān)文檔，把相關(guān)代碼開(kāi)源 。

總結(jié)

單頁(yè)應(yīng)用本身只是一個(gè)概念， 就目前而言，把整個(gè)項(xiàng)目做成一個(gè)單頁(yè)應(yīng)用的話， 如果是小型項(xiàng)目的話還可以。 如果是中大型項(xiàng)目的話則不現(xiàn)實(shí) ，如果真的必須保證使用過(guò)程的流暢度的話 ，那還不如把它做成一個(gè)桌面應(yīng)用或者APP。

?

總結(jié)

以上是生活随笔為你收集整理的【网站架构】为什么我的单页应用这么慢，打开页面需要几分钟？怎样才能用好单页应用？现阶段把整个项目做成一个单页应用真的可行？单页应用的工作原理是什么？的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。