我为一个离线PWA项目选择了vuetify，在该项目中我使用索引数据库和一些值得注意的大小数据（5k-6k /集合）。从服务器获取它们后，我必须在vuex和idb之间传输它。 读取和保存它们有点慢（200-300毫秒），并且会短暂冻结UI。我虽然在加载时使全屏加载屏幕有所帮助，但仍然使加载器结结巴巴。 另外，我在页面之间导航时遇到一些问题。加载v列表（无限加载）和swiper（滑动滑块）会冻结ui，感觉有些不对劲。特别是当我向按钮添加振动时。冻结将振动延迟了100-200毫秒，我不知道我是否被触摸过。
到目前为止我已经尝试过的事情：
遍历列表元素，并在vuex突变时冻结对象（我想保持数组方法的反应性）。感觉更快，但是克隆数组可能会延迟初始加载。仍然不满意。
使用requestAnimationFrame解决导航时的冻结问题，但会延迟子组件的呈现。似乎也不是最好的解决方案。
使用较少的dom元素。我正在为v列表使用无限滚动。尽管它仅渲染15行，但加载速度仍然很慢。我不能使用虚拟列表，因为列表元素具有不同的高度。我没有找到旋转木马/雨刷器 适当的虚拟化。 Vue-awesome-swiper最受欢迎，但是加载速度非常慢。
我的应用
可悲的是，我不能在这里共享项目，但是我没有使用任何特别的代码，这就是为什么我对性能低下感到困惑的原因。
在服务工作流程中
从服务器获取JSON数据-> vuex操作->使用Dexie的bulkPut提交突变并将数据保存到idb->突变会冻结对象并保存到状态
可视化时
使用mapgetter的components从vuex获取列表。使用这些吸气剂，我将获得计算属性以对数据进行过滤/重新排序（这些方法在30ms内运行，它们不应引起问题）。
我找不到任何有用的信息来加快我的应用程序的速度。即使向下滚动列表似乎也很缓慢/缓慢。我可以使用webworker在初始加载时处理IDB，但UI动画仍然很慢。我是否应该减少使用v-container / v-layout / v-flex等...并将原生元素添加到我的应用中？目前，我仅使用vuetify元素。
在我开始加载所有数据时，我肯定会确定初始加载时间会变慢，但此后导航会平稳并快速加载。