Vuetify 性能问题

Question

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

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

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

• 使用 requestAnimationFrame 解决了导航时的冻结问题，但会延迟子组件的渲染。也似乎不是最好的解决方案。

• 使用较少的 dom 元素。我正在为 v 列表使用无限滚动。尽管它只渲染 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组件。它们首先被安装，然后被显示。用户在延迟一段时间后会看到此显示。此外，显示布局后不应通过 API 加载数据（mounted 挂钩中的 getData 方法）。当然，通过 prop {{json_encode($data)}} 加载大量数据会延迟并降低性能。