Vux使用Swiper遇到的问题

需求

        做一个沾满一屏的轮播，并且轮播里的文字数据都是自定义的，不完全是图片。

遇到的问题

        在iPhone12上进行左右滑动的时候回出现卡顿，而在iphone8以及iphone13都试过没有问题。

排查过程

首先是怀疑前端资源太大导致的，就查看了打包后的资源，发现当时应用了特殊的字体，字体文件有8M，后来通过字蛛进行压缩（只对应用的文字进行提取）；首次打包上去测试后不卡顿了，但是多次测试又出现卡顿。

其次是怀疑是否是因为图片太大，数据太多导致的，本打算使用虚拟滚动来解决，但是当时也仅有八张大图片，而且曾经有使用过虚拟滚动来解决问题并有测试，想着应该可以不用虚拟滚动，就把其当成了最后的解决方案。

最后想到，这个滑动卡顿有可能是掉帧了，随即查看了Vux关于swiper的源码，在源码中该组件文件夹里有一个swiper.js，这里控制了左右滑动（_setTransform()方法），里面使用translate3d进行滑动并动态添加到element的style上，随后查看了有那几个地方使用了_setTransform方法；查看到有两处，一处是_init()，另一处是_onResize()，而后就在这两处调用的地方使用了window.requestAnimationFrame进行包裹（window.requestAnimationFrame(() => me._setTransform)）。

采用了requestAnimationFrame方法后再次测试，暂时没有发现问题，而后会继续测试，有问题会在博客里追加。

        博客格式等写的不好，请轻喷，以后会慢慢改进。