h5跳转页面很慢_H5交互的页面跳转方式总结

传统的MPA

首先，说一个比较古老的东西，叫做 MPA。

MPA 的全称是 Multi-page Application，意思是整个应用(站点)由多个完整的 html 构成。用户在页面 1 点击跳转，需要向服务端请求页面 2，请求成功后渲染。而用户返回时，相当于是点击了浏览器的返回，页面退回到之前的历史记录，并重新加载出来。

在这样的模式下，页面间切换慢、不流畅的问题比较突出，尤其是在移动端。

同时，它还产生了几个小问题：

跳转动画：页面间的跳转无法实现转场动画效果。

如果前一个页比较长，用户滑动到页面比较靠下方的位置后点击，返回时，页面无法默认停留在原位置。

iOS 右滑返回产生问题，从页面 1 跳转到页面 2，再从页面 2 跳转到页面 3，右滑返回，会直接回到页面 1 前的页。

SPA

随着对移动端体验需求的提高以及技术的进步，另一种模式 SPA(Single-page Application)逐渐成为主流。

SPA 简单来说，就是原来在 MPA 中的多个 html，现在被放在了一个 html 中，并被分成若干个片段。跳转、返回的本质变成了分段的「隐藏」与「显示」。跳转不需要反复对服务端进行请求，从而使得页面与页面之间切换更加快速流畅。

在这样的机制下，跳转与返回完全由代码控制，所以可以通过代码定义页面转场的效果、返回。

在设计转场动画时，我们需要留意的是导航栏是 Native 的还是 HTML5 的。如果导航栏是 Native 的，那 HTML5 页面不包括导航栏，它