在当前APP开发中原生+web的Hybrid混合式开发占有重要的地位，web应用以其跨平台，快速发版等优势得到广泛的应用。但是web应用的体验很难与原生相比（例如缺少过场动画，卡顿等），于是在app中使用web项目时会给用户很强的割裂感，与原生APP体验格格不入
原生应用体验好的秘密
1页面栈 无论是iso还是安卓还是小程序都有一个很重要的概念页面栈，用户在执行push跳转路由的时候会一层一层的入栈，形成如下的页面栈，在执行back路由时候一层一层的出栈。
栈中的页面都是缓存在内存中的，这样设计有什么好处呢？可以实现前进刷新后退不刷新的功能，这一点非常重要，例如从商品列表进到商品详情通常需要刷新数据，返回的话是不刷新数据的，商品列表页面直接从缓存中拿，避免了重新渲染页面的开销，同时也避免了请求接口的开销。
还有一个很有用的功能是我们可以获取到栈内任意页面的实例，直接对页面进行操作，例如选择地址后我们要返回上一个页面显示选择的地址，就可以在地址列表页面直接修改上一个页面的数据，这不比把数据存在localstorage和vuex中优雅几个level?
说了这么多那我们如何让vue项目拥有页面栈的功能呢,引入下面插件
有同学可能要问了，keep-alive也提供了缓存页面的功能，我何必再安装这个插件，我们来看一下keep-alive有什么缺点
1.缓存的页面是类似堆结构存储的，我们并不知道页面之间的跳转关系。要实现前进刷新后退不刷新的功能需要自己实现一套算法 2.没有暴露获取组件实例的api，我们无法直接操作里面的组件，例如修改数据和调用方法，功能性稍微不足
3.使用LRU缓存淘汰策略，简单来说就是去除最长时间未用的页面，这样会导致一些不可控的因素，我们不想删除的页面被删除了，我们更希望获得一种完全掌控的安全感
2页面过渡动画
spa项目的页面切换是非常生硬的，加上过渡动画可以极大提升页面了使用体验，下面这个项目已经使用了，效果是非常好的，起初在一些低端手机上过渡是非常卡顿的，甚至一闪而过根本没有动画，是因为dom动画性能太低导致的，后开启硬件加速（translate3d），过渡动画非常流畅，可以媲美原生。在120帧高刷的手机上表现尤其突出。
点击链接体验
appweb.test.uupt.com/PagesV2/Dri…
其他可以优化的点
- 还原滚动条位置
- 全局页面可配置的下拉刷新上拉加载
- ssr服务端渲染，首屏直出。
- .....
总结
项目在使用的过程中不止有一个人将其误认为是原生项目，由此引发了我的一些思考，web的能力边界在哪里，我们都在说web项目体验不好的时候，是否将其能力全部发挥出来了，随着web技术的发展和设备性能的提高，web到底能承接多少业务场景，这些都是值得期待的。
