Vuetify 性能问题

Question

我为一个离线 PWA 项目选择了 vuetify，我在其中使用索引数据库和一些值得注意的大小数据（5k-6k/集合）。从服务器获取它们后，我必须在 vuex 和 idb 之间传输它。 读取和保存它们有点慢（200-300 毫秒），并且会在短时间内冻结 UI。我虽然在加载时制作全屏加载屏幕有帮助，但它仍然使加载程序结结巴巴。 另外，我在页面之间导航时遇到了一些问题。加载 v-lists（无限加载）和 swiper（滑动滑块）冻结 ui，感觉有点不对劲。特别是当我为按钮添加振动时。冻结会使振动延迟 100-200 毫秒，我不知道我是否触摸了按钮。

到目前为止我尝试过的事情：

• 循环遍历列表元素，并在 vuex 突变处冻结对象（我想保持数组方法的反应性）。感觉更快，但是克隆数组会延迟初始加载。还是不满意。

• 使用 requestAnimationFrame 解决了导航卡顿，但是延迟了子组件的渲染。似乎也不是最好的解决方案。

• 使用更少的 dom 元素。我正在为 v-lists 使用无限滚动。尽管它只渲染 15 行，但它仍然加载缓慢。我不能使用虚拟列表，因为列表元素有不同的高度。我没有找到旋转木马/刷卡器 适当的虚拟化。 Vue-awesome-swiper 是最受欢迎的，但加载速度非常慢。

我的应用

很遗憾我不能在这里分享这个项目，但是我没有使用任何非凡的代码，所以我对性能低下感到困惑。

在服务工作流

从服务器以 JSON 格式获取数据 -> vuex 操作 -> 提交突变并使用 Dexie 的 bulkPut 将数据保存到 idb -> 突变冻结对象并保存到状态

可视化

组件使用 mapgetter 从 vuex 获取列表。使用这些 getter，我正在创建计算属性来过滤/重新排序数据（这些方法在 30 毫秒内运行，它们不应该产生问题）。

我找不到任何有用的信息如何让我的应用程序更快。即使向下滚动列表似乎也很慢/滞后。我可以在初始加载时使用 webworker 来处理 IDB，但 UI 动画仍然很慢。我应该使用更少的 v-container/v-layout/v-flex 等...并向我的应用程序添加原生元素吗？目前我只使用 vuetify 元素。

由于我在开始时加载所有数据，我预计初始加载时间肯定会变慢，但之后会顺利导航和快速加载。

Answer 1

我的网站完全基于 Laravel 和 Vuetify 技术。只是一些建议。首先，必须有一个非常快的服务器。在速度方面不是平均的，但速度很快。其次，页面不应该有整页的 Vue 组件。它们首先被安装，然后显示。用户在延迟一段时间后将此视为显示。此外，在显示布局后（mounted 挂钩中的 getData 方法）不应通过 API 加载数据。当然，通过 prop {{json_encode($data)}} 加载大量数据会延迟并降低性能。