vue.js - Vue显示大矩阵崩溃浏览器

Question

我正在尝试显示一个由 0/1 构成的大矩阵，每个单元格都是一个可以是黑色或白色的 div，当尝试显示大小为 1000x1000 的矩阵时，浏览器崩溃...

我正在使用与 v-for 嵌套的 v-for 来显示它...

我怎样才能提高性能？

标签： vue.js

Answer 1

这不是 Vue 相关的问题，而是 DOM 相关的问题。您在页面上放置了超过一百万个 DOM 元素。我运行测试的选项卡生成了一个稳定的 1000x1000 矩阵，其中包含空的 div 和类，显示它消耗了 2.3GB 的内存。甚至渲染都花费了相当长的时间，并且滚动非常慢，这表明是浏览器在这里遇到了问题。渲染页面后，Vue 在我的测试中没有做任何事情。

您可以做什么取决于用例。如果您只想以图形方式显示数据，请考虑使用画布。您可以在画布上自由绘图，并且由于您不必处理大约一百万个 dom 元素，因此性能应该会好得多。

其他技术包括延迟加载，您使用滚动位置仅加载/显示视口中的行。这将减少 dom 元素的数量，从而提高性能。

或者，您可以通过提供过滤器或类似的东西来限制提供给用户的数据量。如果过滤器匹配的项目太多，您可以在一定数量的项目上将其切断，您知道这些项目会在浏览器中正常呈现，并显示一条消息，指出出于性能原因，某些结果被隐藏。