浅谈移动端页面无刷新跳转问题的解决方案

最近开发微信公众号,用的框架是 一般的 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的主要原因。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 170,472评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,050评论 18 139
  • 9月10日教师节了,朋友圈关于教师的祝福太多了,也勾起了我的记忆。 今年的教师节到了,而我们已经不是学生,但还记得...
    坚强的不倒翁阅读 191评论 0 0
  • 文/Barnabas|图/网络 因为H兄弟突然间就走了,对我们这群人来说都是一件很震惊的事,同时也给我们有很多的反...
    梦想教练Barnabas阅读 1,212评论 0 3
  • 看簡書,知明天為讀書日?今天一友說我喜歡上看書是不是變老了,回:是。閱讀不為裝扮朋友圈,也寄自己不會逾看逾迂只期遵...
    雨舍酒坊ANG阅读 168评论 1 1