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

96
祈澈菇凉 Excellent
2017.12.22 21:05* 字数 2536

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

我的技术博客
我的技术博客
5.7万字 · 9.8万阅读 · 464人关注
关注WEB前端、站长、网络营销、搜索引擎、系统运维、网络安全的博客 博客地址:https://github.com/wangxiaoting666
Web note ad 1