本文介绍了HTML5页面的跳转方式，包括MPA（Multi-page Application）的传统跳转、SPA（Single-page Application）的快速切换、WebView在App中的运用以及特殊跳转方法Replace。文章探讨了不同跳转方式下的动画效果、页面状态保存和iOS右滑返回等问题，并提供了设计多页面回退的解决方案。
今年做了大量的H5项目，遇到了很多坑，有自家的也有第三方的，在这个过程中get到了一些之前不具备的知识，所以这一篇，就简单分享一下这方面的话题吧。
一、传统的MPA
首先，说一个比较古老的东西，叫做MPA。
MPA的全称是Multi-page Application，意思是整个应用(站点)由多个完整的html构成。用户在页面1点击跳转，需要向服务端请求页面2，请求成功后渲染。而用户返回时，相当于是点击了浏览器的返回，页面退回到之前的历史记录，并重新加载出来。
在这样的模式下，页面间切换慢、不流畅的问题比较突出，尤其是在移动端。
同时，它还产生了几个小问题：
• 跳转动画：页面间的跳转无法实现转场动画效果。
• 如果前一个页比较长，用户滑动到页面比较靠下方的位置后点击，返回时，页面无法默认停留在原位置。
• iOS右滑返产生问题，从页面1跳转到页面2，再从页面2跳转到页面3，右滑返回，会直接回到页面1再之前的页。
二、SPA
随着对移动端体验需求的提高以及技术的进步，另一种模式SPA(Single-page Application)逐渐成为主流。
SPA简单来说，就是原来在MPA中的多个html，现在被放在了一
最低0.47元/天 解锁文章
扫一扫
1156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
