审核性能问题

时间:2019-05-17 19:40:37

标签: javascript vue.js vuetify.js

我为一个离线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元素。

在我开始加载所有数据时,我肯定会确定初始加载时间会变慢,但此后导航会平稳并快速加载。

0 个答案:

没有答案