最近開發(fā)微信公眾號，用的框架是 一般的 UI斋枢，但是涉及到多頁面之間的相互跳轉的問題帘靡，降低了瀏覽器的性能，用戶體驗特別不好瓤帚，卡頓描姚，不流暢,因此不采用傳統(tǒng)的頁面跳轉方式，看到不少手機網(wǎng)頁開發(fā)的框架都都是在一個html文檔中包涵多個頁面的內容戈次，每頁放到不同的
里面轩勘。
于是采用當下流行的單頁面模，在做pc網(wǎng)頁的時候一般都直接給鏈接的怯邪。比起用鏈接來跳轉頁面绊寻，這樣做也是有很多好處的（比如appjs,jquery Mobile)
這種web形式在如今的移動端十分流行，畢竟在移動端頻繁得去刷新界面不是很友好悬秉，而且還費流量澄步。
單頁面介紹
單頁 Web 應用 (single-page application 簡稱為 SPA) 是一種特殊的 Web 應用。它將所有的活動局限于一個Web頁面中和泌，僅在該Web頁面初始化時加載相應的HTML村缸、JavaScript 和 CSS。
一旦頁面加載完成了武氓，SPA不會因為用戶的操作而進行頁面的重新加載或跳轉梯皿。而是利用 JavaScript 動態(tài)的變換HTML的內（采用的是div切換顯示和隱藏），從而實現(xiàn)UI與用戶的交互县恕。
由于避免了頁面的重新加載东羹，SPA 可以提供較為流暢的用戶體驗。得益于ajax弱睦，我們可以實現(xiàn)無跳轉刷新百姓，又多虧了瀏覽器的histroy機制渊额，我們用hash的變化從而可以實現(xiàn)推動界面變化况木。
在Web App和Hybrid App橫行的時代垒拢，為了擁有更好的用戶體驗，單頁面應用順勢而生火惊，單頁面應用簡稱SPA求类，就是只有一個HTML頁面的應用程序，應用中所有的視圖都包含在這個HTML頁面中屹耐，并通過JavaScript控制相關視圖的顯示和隱藏，這種模式可以讓用戶在Web App感受Native App的速度和流暢。
優(yōu)點：
1.無刷新界面食棕，給用戶體驗原生的應用感覺,最大的優(yōu)勢是使用過程的流暢渗磅。
2.節(jié)省原生（android和ios）app開發(fā)成本
3.提高發(fā)布效率，無需每次安裝更新包按灶。
4.容易借助其他知名平臺更有利于營銷和推廣
5:前后端職責分離症革，架構清晰：前端進行交互邏輯，后端負責數(shù)據(jù)處理鸯旁。傳輸?shù)臄?shù)據(jù)少噪矛，減少后端壓力,前后端單獨開發(fā)、單獨測試铺罢。
6:良好的交互體驗艇挨，前端進行的是局部渲染。避免了不必要的跳轉和重復渲染韭赘。
缺點：
1.效果和性能確實和原生的有較大差距
2.各個瀏覽器的版本兼容性不一樣
3.業(yè)務隨著代碼量增加而增加缩滨，不利于首屏優(yōu)化
4.某些平臺對hash有偏見，有些甚至不支持pushstate泉瞻。
5.不利于搜索引擎抓取楷怒，極差的SEO（搜索引擎優(yōu)化）
6：首次加載數(shù)據(jù)大耗時長
7：獨立模塊編譯的成本會越來越大
思想：減少頁面重載和數(shù)據(jù)傳輸
傳統(tǒng)的多頁面應用每個頁面（只說動態(tài)頁面）都是使用服務器端模板編寫，然后請求這個頁面的時候由服務器渲染成 html 再返回瓦灶。兩者對比鸠删，一個很明顯的區(qū)別就是，多頁面應用的 server 端要干兩件事：提供數(shù)據(jù)+渲染贼陶，而單頁面應用把渲染拿到瀏覽器端做了刃泡，服務器只提供數(shù)據(jù)就可以了。
單頁面是指只有一個主頁面的應用碉怔，瀏覽器一開始要加載所有必須的 html, js, css烘贴。所有的頁面內容都包含在這個所謂的主頁面中。但在寫的時候撮胧，還是會分開寫（頁面片段）桨踪，然后在交互的時候由路由程序動態(tài)載入。
正常來講芹啥，單頁面下數(shù)據(jù)請求更新走的不再是重載頁面锻离，而是ajax請求铺峭，更新的內容都是json傳過來的，數(shù)據(jù)量要比下載整個頁面快得多汽纠。對于性能低下帶寬窄小的移動端而言這是個非常好的優(yōu)化點卫键，減少了頁面重載和數(shù)據(jù)傳輸，提高用戶體驗虱朵。
單頁面代表
有些單頁面開發(fā)是通過React莉炉、Vue、Node碴犬、Web Components絮宁、Webpack等來實現(xiàn)
學習文檔：
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 的設計思想極其獨特棒旗，屬于革命性創(chuàng)新喘批，性能出眾，代碼邏輯卻非常簡單铣揉。所以饶深，越來越多的人開始關注和使用，認為它可能是將來 Web 開發(fā)的主流工具逛拱。
如果這三大框架不夠熟悉敌厘，也沒有關系，以下這些方法也可以實現(xiàn)
前端路由有3種實現(xiàn)方式
方法一：hash
早期的路由都是后端實現(xiàn)的朽合，直接根據(jù) url 來 reload 頁面俱两，頁面變得越來越復雜服務器端壓力變大，隨著 ajax 的出現(xiàn)曹步，頁面實現(xiàn)非 reload 就能刷新數(shù)據(jù)宪彩，也給前端路由的出現(xiàn)奠定了基礎。我們可以通過記錄 url 來記錄 ajax 的變化讲婚，從而實現(xiàn)前端路由尿孔。
這里說的是另一種hash路由，就是常見的 # 號，這種方式兼容性更好活合。hash除了這個功能還有另一一種含義：指導瀏覽器的行為但不上傳到服務器雏婶。同樣需要一個根據(jù)監(jiān)聽哈希變化觸發(fā)的事件 —— hashchange 事件
經(jīng)常在 url 中看到 #，這個 # 有兩種情況芜辕，一個是所謂的錨點，比如典型的回到頂部按鈕原理块差、Github 上各個標題之間的跳轉等侵续，路由里的 # 不叫錨點，稱之為 hash憨闰，大型框架的路由系統(tǒng)大多都是哈希實現(xiàn)的状蜗。所以，簡而言之可以這樣理解：改變#后面的值不觸發(fā)網(wǎng)頁重載鹉动，但會記錄到瀏覽器history中去轧坎。
原理:修改hash的方式實現(xiàn)歷史記錄（瀏覽器對hash的修改會記錄歷史記錄）
遵循一種原則，界面無刷新泽示。如果要實現(xiàn)原生應用中類似許多不同頁面切換的效果缸血，我們采用的是div切換顯示和隱藏。監(jiān)聽地址欄中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建立歷史記錄抛计，該方法傳入三個函數(shù)
1哄孤、對應url的信息
2、下一個界面的title
3 吹截、需要你動態(tài)改變的地址欄中的url.
這種方式實現(xiàn)要更復雜录豺，開發(fā)要自己實現(xiàn)url管理，以達到前進饭弓、后退跳轉等能力双饥，不過目前都已經(jīng)有成熟的路由庫可以使用，另外基于div模式的SPA弟断，開發(fā)需要考慮全局對局部的影響咏花，包括css、事件等。
這種方式的優(yōu)點是刷新要更輕量昏翰，js庫和css樣式在首次加載即可苍匆，局部頁面可以只加載少量的數(shù)據(jù)，并且基于div響應式效果在移動端要更好棚菊。因此這也成了目前流行的前端框架angular浸踩、react等選用的方案。通過HTML5 History API统求，實現(xiàn)頁面跳轉检碗，實現(xiàn)簡單的單頁面web應用。
方法三：iframe
其一码邻，使用iframe的優(yōu)點之一就是開發(fā)簡單折剃，目前的瀏覽器都已經(jīng)對iframe url發(fā)生修改產(chǎn)生歷史記錄。
其二像屋，除了響應式問題的兼容性不好之外（也正因此iframe很不適合用在移動端）怕犁，iframe作為使用多年的瀏覽器技術之一，在許多方面的兼容性要好許多己莺，也是一些新技術在低版本瀏覽器上不可用時的替代解決方案奏甫，如contentEditable。
其三凌受，iframe與父文檔相對獨立扶檐，可以不受父文檔的影響，想必這也是目前一些網(wǎng)站（網(wǎng)易云音樂胁艰，QQ空間款筑，各大郵箱）繼續(xù)使用iframe的主要原因。
