移動端頁面無刷新跳轉方法有三種

移動端頻繁得去刷新界面不是很友好，並且還費流量，因此出現單頁面應用-----

單頁面介紹

單頁 Web 應用 (single-page application 簡稱爲 SPA) 是一種特殊的 Web 應用。它將全部的活動侷限於一個Web頁面中，僅在該Web頁面初始化時加載相應的HTML、JavaScript 和 CSS。

一旦頁面加載完成了，SPA不會由於用戶的操做而進行頁面的從新加載或跳轉。而是利用 JavaScript 動態的變換HTML的內（採用的是div切換顯示和隱藏），從而實現UI與用戶的交互。

因爲避免了頁面的從新加載，SPA 能夠提供較爲流暢的用戶體驗。得益於ajax，咱們能夠實現無跳轉刷新，又多虧了瀏覽器的histroy機制，咱們用hash的變化從而能夠實現推進界面變化。

在Web App和Hybrid App橫行的時代，爲了擁有更好的用戶體驗，單頁面應用順勢而生，單頁面應用簡稱SPA，就是隻有一個HTML頁面的應用程序，應用中全部的視圖都包含在這個HTML頁面中，並經過JavaScript控制相關視圖的顯示和隱藏，這種模式可讓用戶在Web App感覺Native App的速度和流暢。

優勢：

1.無刷新界面，給用戶體驗原生的應用感受,最大的優點是使用過程的流暢。

2.節省原生（android和ios）app開發成本

3.提升發佈效率，無需每次安裝更新包。

4.容易藉助其餘知名平臺更有利於營銷和推廣

5:先後端職責分離，架構清晰：前端進行交互邏輯，後端負責數據處理。傳輸的數據少，減小後端壓力,先後端單獨開發、單獨測試。

6:良好的交互體驗，前端進行的是局部渲染。避免了沒必要要的跳轉和重複渲染。

缺點：

1.效果和性能確實和原生的有較大差距

2.各個瀏覽器的版本兼容性不同

3.業務隨着代碼量增長而增長，不利於首屏優化

4.某些平臺對hash有偏見，有些甚至不支持pushstate。

5.不利於搜索引擎抓取，極差的SEO（搜索引擎優化）

6：首次加載數據大耗時長

7：獨立模塊編譯的成本會愈來愈大

思想：減小頁面重載和數據傳輸

傳統的多頁面應用每一個頁面（只說動態頁面）都是使用服務器端模板編寫，而後請求這個頁面的時候由服務器渲染成 html 再返回。二者對比，一個很明顯的區別就是，多頁面應用的 server 端要幹兩件事：提供數據+渲染，而單頁面應用把渲染拿到瀏覽器端作了，服務器只提供數據就能夠了。

單頁面是指只有一個主頁面的應用，瀏覽器一開始要加載全部必須的 html, js, css。全部的頁面內容都包含在這個所謂的主頁面中。但在寫的時候，仍是會分開寫（頁面片斷），而後在交互的時候由路由程序動態載入。

正常來說，單頁面下數據請求更新走的再也不是重載頁面，而是ajax請求，更新的內容都是json傳過來的，數據量要比下載整個頁面快得多。對於性能低下帶寬窄小的移動端而言這是個很是好的優化點，減小了頁面重載和數據傳輸，提升用戶體驗。

單頁面表明

有些單頁面開發是經過React、Vue、Node、Web Components、Webpack等來實現

學習文檔：

Vue：輕量級MVVM框架Vue.js快速上手(MVVM、SEO單頁面應用、SSR服務器端

Vue.js是一套構建用戶界面的輕量級MVVM框架，與其餘重量級框架不一樣的是， Vue.js 的核心庫只關注視圖層，而且很是容易學習

Angular.js：http://www.runoob.com/angularjs/angularjs-tutorial.html

學會用Angular構建應用，而後把這些代碼和能力複用在多種多種不一樣平臺的應用上 —— Web、移動 Web、移動應用、原生應用和桌面原生應用。

React:https://reactjs.org/docs/hello-world.html

React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。

若是這三大框架不夠熟悉，也沒有關係，如下這些方法也能夠實現

前端路由有3種實現方式

方法一：hash

早期的路由都是後端實現的，直接根據 url 來 reload 頁面，頁面變得愈來愈複雜服務器端壓力變大，隨着 ajax 的出現，頁面實現非 reload 就能刷新數據，也給前端路由的出現奠基了基礎。咱們能夠經過記錄 url 來記錄 ajax 的變化，從而實現前端路由。

這裏說的是另外一種hash路由，就是常見的 # 號，這種方式兼容性更好。hash除了這個功能還有另外一一種含義：指導瀏覽器的行爲但不上傳到服務器。一樣須要一個根據監聽哈希變化觸發的事件 —— hashchange 事件

常常在 url 中看到 #，這個 # 有兩種狀況，一個是所謂的錨點，好比典型的回到頂部按鈕原理、Github 上各個標題之間的跳轉等，路由裏的 # 不叫錨點，稱之爲 hash，大型框架的路由系統大多都是哈希實現的。因此，簡而言之能夠這樣理解：改變#後面的值不觸發網頁重載，但會記錄到瀏覽器history中去。

原理:修改hash的方式實現歷史記錄（瀏覽器對hash的修改會記錄歷史記錄）

遵循一種原則，界面無刷新。若是要實現原生應用中相似許多不一樣頁面切換的效果，咱們採用的是div切換顯示和隱藏。監聽地址欄中hash變化驅動界面變化它們的變化記錄瀏覽器會保存在history中，能夠經過回退/前進按鈕找回，或者history對象中的方法控制。

方法二：ajax+div+historyapi （html5推出的historyapi）

這裏不細說每個 API 的用法，你們能夠看 MDN 的文檔：https://developer.mozilla.org...重點說其中的兩個新增的APIhistory.pushState和history.replaceState相同之處是兩個 API 都會操做瀏覽器的歷史記錄，而不會引發頁面的刷新。不一樣之處在於，pushState會增長一條新的歷史記錄，而replaceState則會替換當前的歷史記錄。

window.history.pushState:方法：爲histroy創建歷史記錄，該方法傳入三個函數

一、對應url的信息

二、下一個界面的title

3 、須要你動態改變的地址欄中的url.

這種方式實現要更復雜，開發要本身實現url管理，以達到前進、後退跳轉等能力，不過目前都已經有成熟的路由庫可使用，另外基於div模式的SPA，開發須要考慮全局對局部的影響，包括css、事件等。

這種方式的優勢是刷新要更輕量，js庫和css樣式在首次加載便可，局部頁面能夠只加載少許的數據，而且基於div響應式效果在移動端要更好。所以這也成了目前流行的前端框架angular、react等選用的方案。經過HTML5 History API，實現頁面跳轉，實現簡單的單頁面web應用。

方法三：iframe

其一，使用iframe的優勢之一就是開發簡單，目前的瀏覽器都已經對iframe url發生修改產生歷史記錄。

其二，除了響應式問題的兼容性很差以外（也正所以iframe很不適合用在移動端），iframe做爲使用多年的瀏覽器技術之一，在許多方面的兼容性要好許多，也是一些新技術在低版本瀏覽器上不可用時的替代解決方案，如contentEditable。

其三，iframe與父文檔相對獨立，能夠不受父文檔的影響，想必這也是目前一些網站（網易雲音樂，QQ空間，各大郵箱）繼續使用iframe的主要緣由。

 

 

原文做者：祈澈姑娘

原文連接：https://www.jianshu.com/u/05f416aefbe1