开发一款流畅的 小程序 和 Hybrid App 需要知道的事

Hybrid App（混合模式移动应用）是指介于web-app、native-app这两者之间的app，兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。

理想很美好，现实很残酷。开发的速度快（令人兴奋），运行的速度慢（饱受诟病）。
没经历过的人很想尝试，经历过的人敬而远之。

Hybrid App的定位就是开发内容展示型APP，如“新闻”，“商城”，“小说”类非强交互型的APP还是基本可以满足的。

Hybrid App的能力上限参照小程序，现在新出的跨平台解决方案都以小程序为蓝本（不止是占用比，还有性能问题）。开发上没问题，但实际情况不允许，web-view性能瓶颈明摆着的事。

可能你做的就是非强交互型的APP，但还是会有严重的卡顿现象。对于这种情况有什么优化方案呢？

1、减少web-view的数量

web-view的数量泛滥是造成卡顿的大部分原因之一，比如“新闻”类APP，打开后顶部会有多种类别的新闻列表，通过左右滑动切换，在技术可行性上是非常轻松能完成这项功能，但实现情况却是不允许的，如果存在这样的设计，打开多窗口后，肯定会出现卡顿。
解决办法：只能从体验上牺牲，不再是创建多个web-view，只创建一个，切换当前web-view的内容。
可以体验各个Hybrid App的开发平台上的demo，都是这种方式，所以这是必要的。

2、避免“死循环”的出现

“死循环”是我自己给命的一个词，我举例一下场景来说明这种现象
当前在页面A，新建窗口打开B,B窗口新建打开C，C窗口新建打开A，
看上去有点扯，那说一下实际一点的现象（“用户主页” >  “用户推荐列表”  >  "用户主页"）。
这样的页面出现死循环，当用户多次点击后，创建的web-view数量非常多，卡顿的情况自然而然的出现了，这和第一点提到的问题是一样的，虽然没有同时在一个窗口下创建多个，但间接的创建了多个，造成web-view数量泛滥。
解决办法：
第一种：牺牲体验，不允许新建窗口打开（以当前窗口打开）。
第二种：及时销毁未使用的窗口，这个真正要实现起来有一定难度的。
微信小程序是要求页面栈上限5来防止出现这种情况

3、CSS3动画是“流畅”的杀手

CSS3动画是“流畅”最恐怖的杀手，非常明显及致命。
如果前面所说的web-view数量10个能造成影响的话，CSS3动画只要3个就能比web-view10个还恐怖的存在。
CSS3动画形式分为两大类：“有间断性”，“无间断性”。
有间断性动画，比如窗口的弹出（从各个方向移动或者渐变的方式进入到可视区域，动画完成后动画终止）。
无间断性动画，主要体现在loading效果上，CSS3有各种loading的源码。当一个loading出现时不以为然，如果是多个窗口都存在，那非常致命，造成严重的卡顿。比如列表页的上拉触底加载更多信息，为追求好看，加上一个loading的动画效果。

这两类动画造成卡顿主要是因为无间断性动画，所以只需要解决无间断性动画即可

解决办法：
第一种：牺牲体验，就拿上拉触底加载更多这个情况来说，用文字代替即可。
第二种：及时销毁CSS3动画（删除动画元素），是销毁并不是不可视（隐藏动画元素），在状态切换后，及时将元素删除，需要时再重新创建。（如果是用vue的伙伴，把 v-show 改成 v-if 就好了，虽然在代码上并不科学，但必须为“流畅”让步）

如果你在开发Hybrid App中有上述情况的烦恼，可按上述的方案来解决（优先删除CSS3无间断动画，卡顿情况能立马得到改善）。

以上是自己的个人工作经验的总结，虽然解决的办法都是说“牺牲体验”，但这是没有办法的，能不牺牲体验，那还要“Native App”干什么，鱼和熊掌不可兼得。。

作者：黄河爱浪 QQ：1846492969，邮箱：helang.love@qq.com

公众号：web-7258，本文原创，著作权归作者所有，转载请注明原链接及出处。

更多精彩文章，请扫下方二维码关注我的公众号