浅谈移动端页面无刷新跳转问题的解决方案
最近开发微信公众号,用的框架是 一般的 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.cnblogs.com/wangting888/p/9701884.html
浅谈移动端页面无刷新跳转问题的解决方案相关推荐
- 浅谈移动端页面性能优化方案
众所周知,在互联网行业里,移动端占有的比例越来越高了,尤其实在电商领域,用户购物大部分在移动端.比如淘宝双11,在移动端支付的接近7成.这就要求我们产品质量越来越高,那对于我们前端工程师来说也是一个挑 ...
- html5 pjax,pjax——页面无刷新跳转
pjax虽然不是什么新的技术,然而本人是最近才发现这个比较牛叉的技术.下面是对pjax的介绍: pjax是在HTML5里面引用的新技术,是对ajax + pushState的封装,是实现无刷新ajax ...
- pjax php,ThinkPHP5.1配合pjax实现菜单栏无刷新跳转
## 所需资源 [boodcdn的pjax的js代码]([https://www.bootcdn.cn/jquery.pjax/](https://www.bootcdn.cn/jquery.pjax ...
- php无刷新跳转,用#号实现web页面的无刷新跳转
我想做一个如图一样的Web客户端,点击左面的导航右面的页面实现无刷新跳转, 就是当右面的页面变化时 路由主地址不变,如index.html/#页面一,求大神指点,或者给学习文档 就是 tab 切换,用 ...
- 基于jQuery的ajax系列之用FormData实现页面无刷新上传
接着上一篇ajax系列之用jQuery的ajax方法向服务器发出get和post请求写,这篇主要写如何利用ajax和FormData实现页面无刷新的文件上传效果,主要用到了jQuery的ajax()方 ...
- ajax 页面无刷新,Ajax的页面无刷新实现详解(附代码)
这次给大家带来Ajax的页面无刷新实现详解(附代码),Ajax页面无刷新实现的注意事项有哪些,下面就是实战案例,一起来看一下. ajax (ajax开发) AJAX即"Asynchronou ...
- 前端 页面无刷新方案一
在开发过程中,为了避免每个页面要做头部底部,就想怎么实现页面无刷新,局部实现效果更换方案 第一联想到了ajax读取页面没然后页面局部替换,在页面上准备几个div.这里就简单粗暴的分成3个部分,(直接贴 ...
- pc端rem适配_浅谈pc端rem字体设置的问题
1.内容在一屏内显示的,采用了(内容框)上下左右居中的办法,里面的内容绝对于这个内容框定位.这样一来,在不同大小屏中,内容总是在中间,看起来较正常 2.长,宽,LEFT,TOP,RIGHT,BOTTO ...
- html设置视口,浅谈移动端中的视口(viewport)的具体使用
在 PC 端,视口指的是浏览器的可视区域,其宽度和浏览器窗口的宽度保持一致.在 CSS 标准文档中,视口也被称为初始包含块,它是所有 CSS 百分比宽度推算的根源,给 CSS 布局限制了一个最大宽度. ...
最新文章
- 中科院博士因论文致谢走红后,回到母校演讲再刷屏!网友:是对寒门学子最好的激励...
- ADSL+NAT配置实例
- selenium启动Firefox示例
- SQL优化—— 大批量插入数据
- python3模拟登陆人人网(requests)
- 从玉农业谋定塞外-丰收节交易会·林裕豪:巴彦淖尔深圳签约
- Ubuntu服务器安装lamp
- TyepScript入门教程 之 async await
- phpMailer在CentOS 6.5下无法发送邮件的解决办法
- 3.调试与配置,控制器
- 英特尔 XML 安全网关
- 注册为linux系统服务,注册程序为Linux系统服务并设置成自启动
- 《21天学通C语言》
- 网络抖动多少ms算正常_如何测试延时、抖动、丢包率
- QT IOS风格音乐播放器(一) 项目介绍
- 个人数字证书免费申请
- 利用谷歌浏览器翻译外文文献 操作记录
- HDOJ 月之数 2502
- 【微信小程序】 map 组件 callout 自定义气泡 (实实在在的讲解)
- PrettyZoo V1.8.0 发布了, 一款值的收藏的 Zookeeper 图形化工具
热门文章
- Python获取当前系统时间
- 智能控制第四版程序代码_晋中成本低的智能水表方便了人们生活
- 异步udpserver接收rtp转html5(一)
- 法国 计算机 转专业,在法国留学怎样换专业
- mysql 连接 110 超时_Nginx和mysql上行超时超时(110:连接超时)
- 【kafka】kafka 消息头的强大功能
- 【Clickhouse】CLICKHOUSE SQL文件等常用语句
- 【kafka】JMX 监控kafka FINER RMI TCP getConnectionId IOException
- 【Java】JDK8新特性之方法引用
- fastjson字符串json转对象(父类转子类)