最近開發微信公眾號,用的框架是 一般的 UI,但是涉及到多頁面之間的相互跳轉的問題,降低了瀏覽器的性能,用戶體驗特別不好,卡頓,不流暢,因此不采用傳統的頁面跳轉方式,看到不少手機網頁開發的框架都都是在一個html文檔中包涵多個頁面的內容,每頁放到不同的
里面。
于是采用當下流行的單頁面模,在做pc網頁的時候一般都直接給鏈接的。比起用鏈接來跳轉頁面,這樣做也是有很多好處的(比如appjs,jquery Mobile)
這種web形式在如今的移動端十分流行,畢竟在移動端頻繁得去刷新界面不是很友好,而且還費流量。
### 一:單頁面介紹
單頁 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建立歷史記錄,該方法傳入三個函數
1、對應url的信息
2、下一個界面的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的主要原因。
做最專業最懂你的編程微刊技術分享平臺,提供你最需要的開發學習資源。 我們專注于編程開發技術的學習與交流,我們堅持,每天進步一小步,人生進步一大步!關注【編程微刊】,與我們一起學習進步。
- 前端框架
- 進階攻略:前端最全的框架總結
- 進階攻略:前端完整的學習路線
- 進階攻略:最全的前端開源JS框架和庫
- 常用的六個富文本編輯器
- 移動端手勢的七個事件庫
- Bootstrap相關優質項目學習清單
- 三個Bootstrap免費字體和圖標庫
- jQuery實現多種切換效果的圖片切換的五款插件
- 移動端常用的四個框架
- 七個幫助你處理Web頁面層布局的jQuery插件
- 前端工具
- 八款前端開發人員更輕松的實用在線工具
- 推薦幾款好用的云筆記軟件
- 幾款在線的腦圖制作工具
- 細數那些年我用過的前端開發工具
- 九款優秀的企業項目協作工具推薦
- 細數那些帶打賞功能的平臺
- 干貨|幾個有用的問答平臺
- 前端資源
- web開發快速提高工作效率的一些資源
- 前端工程師們,這些干貨讓你開發效率加倍
- 那些我不得不收藏的技術網站
- 前端學習的幾個網站
- 老司機程序員用到的各種網站整理
- 前端幾個常用簡單的開發手冊拿走不謝
- 2017年度最流行的十大中國開源軟件
- 程序員常用的六大技術博客類
- 提高工作效率的幾個小技巧
- Bootstrap相關優質項目必備網址
- 前端技術棧
- h5調用底層接口的一些知識
- JS數組去重的6種算法實現
- Git安裝及密鑰的生成并上傳本地文件到GitHub上
- JS數組排序技巧匯總(冒泡、sort、快速、希爾等排序)
- 就如何快速免費提高網站排名小結
- 淺談移動端頁面無刷新跳轉問題的解決方案
- 移動端iPhone系列適配問題的一些坑
- HTML5在客戶端存儲數據的新方法——localStorage
- 移動開發之css3實現背景幾種漸變效果
- 前端雜談
- 程序員如何利用空余時間掙零花錢?
- 一個前端妹子的悲歡編程之路
- 【程序員交友】祈澈姑娘:假裝文藝與代碼齊飛的前端妹子
- 初中級前端開發工程師如何提升個人能力?
- 如何打造個人技術影響力
- 程序媛,堅持這幾個好習慣讓你越來越美
- 工作中如何快速成長和學習?
- 我是如何快速積累工作經驗
- 谷歌AI中國中心成立,人工智能勢不可擋?
- 前端面試
- 一份來自前端開發工程師的規范簡歷
- 2017前端精品面試文章總結
- 面試經歷:為即將找工作的你保駕護航
- 我的北漂之路 北漂如飲水,冷暖自知
- 如何在面試中脫穎而出?
- 2017年10大主流編程語言最新排行榜出爐
- 前端面試之前要準備的那些事