浅谈移动端页面无刷新跳转问题的解决方案
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：
学会用Angular构建应用，然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web、移动 Web、移动应用、原生应用和桌面原生应用。
React:https://reactjs.org/docs/hello-world.html
React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
如果这三大框架不够熟悉，也没有关系，以下这些方法也可以实现
前端路由有3种实现方式
方法一：hash
早期的路由都是后端实现的，直接根据 url 来 reload 页面，页面变得越来越复杂服务器端压力变大，随着 ajax 的出现，页面实现非 reload 就能刷新数据，也给前端路由的出现奠定了基础。我们可以通过记录 url 来记录 ajax 的变化，从而实现前端路由。