?傳統的網站會不斷跳轉頁面， 例如單擊搜索后會跳轉頁面，單擊翻頁后會跳轉頁面， 而一旦出現跳轉頁面，用戶就需要等待重新加載頁面后才能繼續操作。

為了改進這種糟糕體驗，單頁應用的概念逐漸流行， 單頁應用指的是在瀏覽器中運行的應用，使用期間不會重新加載頁面。 簡單地說，就是把多個頁面合成一個頁面，通過JavaScript腳本控制其元素的顯示。

?

下面，我們分別討論一下這4個核心問題?

單頁應用的工作原理是什么?

整個前端項目做成一個單頁應用好嗎?

我們推薦的單頁應用運用方式是什么

使用Iframe實現偽單頁應用?

1、單頁應用的工作原理是什么

首先，我們先講單頁應用的工作原理， 這里先明確一點，單頁應用本身只是一個概念，其實就是把多個網頁合成一個網頁。 很多人會誤以為只有使用一些框架或工具才能實現單頁應用（如vue-cli、react-cli、Angular2及后續版本） 。只因為它們提供了完備的模塊化、路由方案，所以使用這些工具開發單頁應用是相對容易的。但其實單頁應用就是一個頁面，只不過是復雜的頁面 ，其基本技術還是Html、Css、JavaScript。

單頁應用的工作原理 簡單地說，就是JavaScript監聽事件發生，當事件發生后，JavaScript會控制頁面元素的顯示。

?

其具體的實現方式，有2種

1、通過交互事件控制?

2、通過路由控制

通過交互事件控制頁面元素的變化是相對普遍的做法 ，對于一些相似的頁面，如列表頁面、左導航右文章等頁面 這些頁面如果是點擊翻頁或者切換導航，頁面其實只有數據變化，而頁面布局是幾乎不變化的， 對于這些頁面，其實只需要監聽點擊或其他交互事件 ，然后向服務器請求新數據，最后替換數據就可以了。

但是對于元素布局及內容完全不同的頁面之間，如列表頁和視頻播放頁， 如果要將這些頁面通過監聽交互事件的方式做成單頁應用的話 ，則會變得很麻煩 ，對于這種場景，就可以通過路由的方式控制。

控制路由的方式，簡單地說，就是監聽URL的變化，來控制頁面元素的顯示。 路由的方式有hash和history 兩種。

hash方式的工作原理是，監聽瀏覽器地址的# 號部分的變化，以顯示頁面元素， 由于瀏覽器地址的# 號部分的變化是不會引起頁面跳轉的，所以在列表跳轉到播放頁面的時候仍然可以使用a標簽。

history方式的工作原理是，使用history.pushState、history.replaceState等瀏覽器API去修改瀏覽器地址 ，用這些API修改瀏覽器地址的話，是不會引起頁面跳轉的 ，JavaScript監聽到瀏覽器地址變化后，會控制頁面元素的顯示。

2、整個前端項目做成一個單頁應用好嗎?

接下來，我們討論整個項目做成一個單頁應用真的好嗎 ？我們的答案是不好，尤其是中大型項目。

我們曾經參與過一個項目， 把300多個頁面做成一個單頁應用， 本地打開需要幾分鐘，性能差點的機器直接崩潰， 后面也做了一些優化，如懶加載，分離子項目等， 性能有所提升，但是性能還是不好。

其實網頁本身就不適合做成應用的模式， 網頁的優點恰恰在于頁面分散，用戶無需像APP一樣下載安裝， 只需要在需要的時候再下載相關頁面就可以了。

單頁應用概念的初衷是緩解不斷跳轉的糟糕體驗 ，如果極端地把整個項目做成一個單頁應用 ，它就跟桌面應用、APP沒有區別了， 需要長時間的下載以換取流暢的體驗 ，再說了，瀏覽器的內存管理并沒有操作系統的好 ，一個內容超多的網頁的性能也不會流暢。

那么，把整個項目做成一個單頁應用 ，那還不如直接做成一個桌面應用或者APP， 畢竟，現在也有很多成熟的跨平臺解決方案了。

所以，目前如果決定把整個個中大型項目做成一個單頁應用的話 確實是比較魯莽的行為。

當然，未來也不是說不可能， 谷歌也在努力推動Chrome操作系統，推動網絡應用的發展 但是，目前來看，不太現實 畢竟網頁做出來，是給現在的人用的?

3、我們推薦的單頁應用運用方式是什么

接下來，我們講一下我們推薦的單頁應用的應用方式 第一，我們不推薦把整個項目做成一個單頁應用 第二，我們只推薦把一些相似的網頁做成一個單頁應用。

例如，相似的列表頁可以做成單頁應用，點擊翻頁、導航切換時， 只需要更換數據或一小部分頁面元素就可以了。

至于完全不同的頁面，如視頻列表頁和視頻播放頁 ，則完全沒必要整合成單頁應用，因為瀏覽器本身是有緩存機制的， 即使跳轉也不會花太長時間。

另外，把不同的頁面分離還有一些好處， 如頁面性能可以單獨調整，而不是面對一大堆代碼無從下手。

最后，我們討論使用iframe實現偽單頁應用 ，我們推薦不同的頁面需要分離開來 ，那么，如何更加便捷地組織這些頁面呢？

4、使用Iframe實現偽單頁應用?

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

這樣做的好處是，既可以減少固定元素和固定信息的重復加載 ，又可以很好地組織切換不同的頁面。這種方式是很多網站常用的做法 ，也是我們試驗下來比較好用的做法。

當然，如果用這種方法的話，需要解決幾個問題?

第一，是Iframe框需要根據內容自動變化高度，子頁面可以使用window.MutationObserver等方式監聽并修改父頁面的Iframe框高度 。

第二，是攔截a標簽的跳轉，并通知上層導航找到真實的地址并替換iframe中的頁面，這樣，就可以使用頁面識別碼跳轉子頁面了。

?

我們的官網就是使用這種iframe方式做的， 體驗上還是比較好的， 后續我們會整理相關文檔，把相關代碼開源 。

總結

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。