# 页面渲染

uniapp在小程序中无法操作dom,所以在性能上会造成通信折损,在小程序中尤为明显。

当数据与页面节点变多时,3D切换效果会变得卡顿,迟缓。为此,zebra-swiper提供了两种优化思路。

当然,我们也会新增一些配置,让开发者更轻松的实现性能优化。

# 1.节点重置

该方法的实现思路是,利用数据驱动页面,将当前页面显示的slide的前面和后面的slide节点中的内容清空,即只显示slide最外层div。

优点:

页面的结构不会发生变化,容错率高。

缺点:

优化不够纯粹,在海量数据面前依然卡顿。

# 2.节点切割

该方法会在Dom结构中保持尽量少的Slide,只渲染当前可见的slide和前后的slide,而隐藏其他不可见的Slide,每次切换时就渲染新的Slide。当你的Slide很多的时候,尤其是Slide中有复杂的Dom树结构时,性能会有很大的提升。

优点:

无论多少数据性能都会保持一致。

缺点:

uniapp中,当页面结构发生变化时,image图片的位置随即也会发生变化,这会导致图片间歇性出现闪烁,偏移等问题。

我们进行了多种尝试,依然无法解决该优化方案所导致的问题,我们仍在探索一种可行的写法来避免这个问题,但是目前看来,这是十分困难的。