Vue显示大型矩阵导致浏览器崩溃

Question

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

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

我如何提高性能？

Answer 1

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

您可以执行的操作取决于用例。如果只想以图形方式显示数据，请考虑使用画布。您可以自由地在画布上绘画，并且由于不必摆弄一百万个dom元素，因此性能应该好好。

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

或者，您可以通过提供过滤器或类似内容来限制提供给用户的数据量。如果过滤器匹配的项目过多，则可以将其截断为一定数量，您知道这些项目可以在浏览器中很好地呈现，并显示一条消息，其中某些结果出于性能原因而被隐藏。