什麼是單頁應用程序?

現代Web應用程序也稱為單頁應用程序。這是什麼意思?

過去,當瀏覽器的功能遠不如今天,並且JavaScript性能很差時,每個頁面都來自服務器。每次您單擊某些內容時,都會向服務器發出新請求,然後瀏覽器隨後會加載新頁面。

只有極富創新性的產品才能發揮不同的作用,並嘗試新方法。

如今,在諸如React之類的現代前端JavaScript框架中流行的應用程序通常是作為單頁應用程序構建的:您只需加載應用程序代碼(HTML,CSSJavaScript)一次,當您與應用程序進行交互時,通常會發生JavaScript攔截瀏覽器事件的情況,而不是向服務器發出新請求,然後服務器返回一個新文檔,而是由客戶端請求一些JSON或在服務器上執行操作但是用戶看到的頁面永遠不會被完全抹掉,其行為更像是桌面應用程序。

單頁應用程序內置於JavaScript中(或至少已編譯成JavaScript),並且可以在瀏覽器中工作。

技術始終是相同的,但是應用程序的工作原理和一些關鍵組成部分是不同的。

單頁應用程序示例

一些著名的例子:

  • 郵箱
  • 谷歌地圖
  • Facebook
  • 推特
  • Google雲端硬碟

SPA的優缺點

SPA對用戶的感覺要快得多,因為您現在可以立即獲得反饋,而不必等待客戶端與服務器之間的通信發生,而不必等待瀏覽器重新呈現頁面。這是應用程序製造商的責任,但是您可以擁有過渡和微調器以及任何類型的UX改進,這些改進肯定比傳統工作流程更好。

除了使用戶體驗更快之外,服務器還將消耗更少的資源,因為您可以專注於提供有效的API,而不是在服務器端構建佈局。

如果您還基於API構建移動應用程序,那麼這將是理想的選擇,因為您可以完全重用現有的服務器端代碼。

單頁應用程序很容易轉換為漸進式Web應用程序,從而使您能夠提供本地緩存並支持服務的脫機體驗(如果用戶需要在線,則可以提供更好的錯誤消息)。

當不需要SEO(搜索引擎優化)時,SPA最好使用。例如,對於在登錄後起作用的應用程序。

搜索引擎雖然每天都在進步,但仍然難以為使用SPA方法而非傳統的服務器呈現頁面建立的站點建立索引。博客就是這種情況。如果您要依賴搜索引擎,那麼即使沒有服務器也不能創建一部分應用程序,也不必擔心創建單個頁面應用程序。

在編寫SPA時,您將編寫大量JavaScript。由於該應用程序可以長時間運行,因此您將需要更多地註意可能的內存洩漏-如果過去您的頁面的生命週期以分鐘為單位計算,那麼現在SPA可能會在數小時內保持打開狀態數小時。時間以及是否存在任何內存問題,這將使瀏覽器的內存使用量增加更多,而且如果您不加以注意,它將導致令人不快的緩慢體驗。

團隊合作時,SPA非常有用。後端開發人員可以只專注於API,前端開發人員可以專注於利用後端內置的API來創造最佳的用戶體驗。

缺點是,單頁應用程序嚴重依賴JavaScript。這可能會使在低功率設備上運行的應用程序在速度方面的體驗較差。另外,您的某些訪問者可能只是禁用了JavaScript,並且您還需要考慮所構建內容的可訪問性。

覆蓋導航

由於您擺脫了默認的瀏覽器導航,因此必須手動管理URL。

應用程序的這一部分稱為路由器。一些框架已經為您做好了準備(例如Ember),其他框架則需要可以完成此工作的庫(例如反應路由器)。

有什麼問題?最初,這是開發人員構建單頁應用程序的一種後繼想法。這導致了常見的“後退按鈕”問題:在應用程序內部導航時,URL保持不變(由於瀏覽器默認導航被劫持),然後按了後退按鈕,這是用戶執行的常見操作,可轉到上一個屏幕,可能會轉到您很久以前訪問過的網站。

現在可以使用歷史API由瀏覽器提供,但是大多數時候您會使用內部使用該API的庫,例如反應路由器

免費下載我的JavaScript初學者手冊


更多js教程: