浅谈移动端页面无刷新跳转问题的解决方案
浅谈移动端页面无刷新跳转问题的解决方案
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后前端妹子，爱编程，爱运营，爱折腾。
> 坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。