专栏首页编程微刊浅谈移动端页面无刷新跳转问题的解决方案

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

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

2017-12-22  祈澈姑娘

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

> 原文作者:祈澈姑娘

> 技术博客:[https://www.jianshu.com/u/05f416aefbe1](http://link.zhihu.com/?target=https%3A//www.jianshu.com/u/05f416aefbe1)

>

> 90后前端妹子,爱编程,爱运营,爱折腾。

> 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • uni-app学习笔记-页面跳转和传参问题(六)

    在登录界面,输入用户名和密码,输入成功之后,会登录进我们的项目里面,现在来实现一下,登录到导航tab页面和普通页面。

    王小婷
  • 小程序云开发实战一:小程序扫一扫获取到图书ISBN码(图书条形码)

    接触到云函数已经有一段时间了,之前一直在看api,现在自己跟着网络上的资料和视频学习,做了一个小项目,类似于豆瓣读书系列。 具体是这样的一个流程,后面会一步步...

    王小婷
  • bootstrap-table表格超过长度自动隐藏

    今天说一说bootstrap-table表格优化相关的,当表格里面的内容列数过多的,内容长度过长的时候,会出现自动换行的效果,整个表格的每一行高度就不相同了,看...

    王小婷
  • 使用easyswoole开发多进程多协程队列式爬虫

    这里我推荐http://www.querylist.cc/  可使用jq的语法选择html页面的元素,非常好用

    仙士可
  • 【Mockplus教程】分组

    为了更好的管理和组织多个页面,可以选择将页面分组。 选择多个页面,然后使用右键点击后,在弹出的菜单中选择“将页面归类到新分组”。 完整演示如下: ?

    奔跑的小鹿
  • 2.4.1、Google Analytics高级应用——查看页面上下级

    在GA中查看上下级页面有默认参数:先前页面路径和后续页面路径,但出来的结果往往是前后相等的,错误的,如图2-48所示:

    GA小站
  • 微信小程序生命周期学习笔记-页面篇

    小程序的生命周期分三类:应用生命周期、页面生命周期、组件生命周期。现在我们来学习一下页面的生命周期。

    面向对象思考
  • 外链建设:认识PageRank

    谷歌核心是页面排名(PageRank),基于网站每个页面的分数,网站链接的流行度与指向页面链接的数量和质量有关,并被谷歌用作页面排名和搜索结果排名的标准之一。

    林雍岷
  • 谈谈小程序中返回上一页面逻辑

    前言:小程序页面之间的互相跳转,页面个数是开发工程师要考虑的问题。微信官方之前给出的最大页面堆栈是5,现在改为了10,如果超过最大堆栈数,会报错Maximum ...

    连胜
  • CMS-需求分析

    CMS (Content Management System)即内容管理系统,不同的项目对CMS的定位不同,比如:一个在线教育网 站,有些公司认为CMS系统是对...

    cwl_java

扫码关注云+社区

领取腾讯云代金券