在本文中，我們將看看SPA如何設計以及減少用戶體驗的常見缺陷。
單頁應用程序體系結構
大多數網站都被分成多個網頁，以便使他們所包含的信息更易於使用。傳統的體系結構是為每個頁面提供一個唯一的URL。要導航到頁面，瀏覽器會向該頁面的URL發送GET請求。服務器將返回該頁面，瀏覽器將卸載現有頁面並加載新頁面。
對於普通的互聯網連接，導航過程可能需要幾秒鐘，在此期間用戶必須等待加載新頁面。
從用戶的角度來看，這樣一個網站看起來像其他網頁一樣，但從技術角度來看，這個網站實際上只有一個頁面。因此，名稱，單頁面應用程序。
一個router library是SPA架構的引擎。它將通過JavaScript和各種Web API模擬瀏覽器導航，以便用戶獲得類似於傳統多頁應用的體驗。
router通常會包含以下功能：
· 處理頁面內的導航操作
· 將應用程序的部分與URL匹配
· 管理地址欄
· 管理瀏覽器歷史記錄
· 管理滾動條行為
改善用戶體驗
單頁應用程序體系結構的目的是改進用戶體驗，它通過以下方式實現：
1.
SPA可以為用戶提供更持續的體驗，因為導航不再需要刷新頁面。新頁面的數據仍然必須被檢索，並且因此會對用戶的流程造成一些小的中斷，但由於數據檢索可以異步完成並且JavaScript可以繼續運行，因此這種中斷會最小化。
2.
SPA加載後，頁面之間的導航更快，因為SPA將重用頁面元素，因此不需要繼續下載相同的重複標記。但是，需要將router library添加到您的JavaScript包中，因此在執行會計時請記住這一點。
陷阱
具有諷刺意味的是，如果不避免某些缺陷，單頁面應用程序可能會損害用戶體驗：
1.
SPA會破壞本地導航功能。例如滾動位置，歷史記錄，後退按鈕等。一旦router劫持頁面導航，這些功能可能無法按預期工作。SPA必須使用JavaScript和Web API來恢復功能history.pushState。大多數好的router library會幫助你做到這一點，但仍然需要一些手動實現。
2.
SPA具有較大的初始下載大小。由於必須首先下載router和多用途頁面元素才能使應用程序正常工作，因此SPA在運行之前需要先進行下載。像Webpack這樣的構建工具可以通過在第一次渲染之前延遲加載任何不需要的代碼來提供幫助。
3.
SPA將需要自定義加載狀態和錯誤消息。瀏覽器給出了正在加載頁面的可視提示，並且Web服務器可以返回404頁面。另一方面，AJAX請求的結果在設計上對用戶是隱藏的。SPA必須找到讓用戶知道應用是否已成功響應其操作的方法。
4.
通過對SPA體系結構的天真實施，
頁面內容可能不會包含在初始頁面下載中，這意味著用戶可能需要等待JavaScript運行並完成AJAX調用。服務器端渲染或預渲染是對此的解決方案，但通常需要複雜的設置。結論
SPA體系結構的目的是提供卓越的用戶體驗，但除非採取適當的謹慎措施，否則可能會產生相反的效果！
如果您選擇SPA圖像，請注意以下幾點：
· 配置您的router軟件，以便本機導航功能不會中斷
· 使用構建工具功能，如代碼分割和延遲加載，以確保初始代碼包不太大
· 實施加載狀態和錯誤消息，以便用戶知道該頁面正在響應他們的操作
· 使用預渲染或服務器端渲染來確保您的SPA儘早顯示內容
最重要的是，確保您已經為構建，測試和維護SPA所需的額外工作做好了預算。
閱讀更多 空空教你玩黑客 的文章
關鍵字: 路由器 編程語言 JavaScript
