Vue 显示大矩阵导致浏览器崩溃
Vue displaying large matrix crashes browser
我正在尝试显示一个由 0/1 构成的大矩阵，每个单元格都是一个 div，可以是黑色或白色，当尝试显示大小为 1000x1000 的矩阵时，浏览器崩溃了。 .
我正在使用嵌套在 v-for 中的 v-for 来显示它...
如何提高性能？
这不是 Vue 相关的问题，而是 DOM 相关的问题。您在页面上放置了超过一百万 DOM 个元素。我 运行 生成稳定的 1000x1000 矩阵和空 div 的测试的选项卡和 类 显示它消耗了 2.3GB 的内存。甚至渲染都花费了相当长的时间，并且滚动非常慢，这表明这是浏览器出现问题的地方。呈现页面后，Vue 在我的测试中没有执行任何操作。
您可以做什么取决于用例。如果您只想以图形方式显示数据，请考虑使用 canvas。您可以在 canvas 上自由绘制，并且由于您不必处理大约一百万 dom 个元素，因此性能应该 多 更好。
其他技术包括延迟加载，您可以在其中使用滚动位置来仅 load/show 视口中的行。这将减少 dom 元素的数量，从而提高性能。
或者，您可以通过提供过滤器或类似的东西来限制提供给用户的数据量。如果筛选器匹配太多项目，您可以在您知道可以在浏览器中正常呈现的特定数量的项目处将其切断，并显示一条消息，说明出于性能原因，部分结果已隐藏。
我正在尝试显示一个由 0/1 构成的大矩阵，每个单元格都是一个 div，可以是黑色或白色，当尝试显示大小为 1000x1000 的矩阵时，浏览器崩溃了。 .
我正在使用嵌套在 v-for 中的 v-for 来显示它...
如何提高性能？
这不是 Vue 相关的问题，而是 DOM 相关的问题。您在页面上放置了超过一百万 DOM 个元素。我 运行 生成稳定的 1000x1000 矩阵和空 div 的测试的选项卡和 类 显示它消耗了 2.3GB 的内存。甚至渲染都花费了相当长的时间，并且滚动非常慢，这表明这是浏览器出现问题的地方。呈现页面后，Vue 在我的测试中没有执行任何操作。
您可以做什么取决于用例。如果您只想以图形方式显示数据，请考虑使用 canvas。您可以在 canvas 上自由绘制，并且由于您不必处理大约一百万 dom 个元素，因此性能应该 多 更好。
其他技术包括延迟加载，您可以在其中使用滚动位置来仅 load/show 视口中的行。这将减少 dom 元素的数量，从而提高性能。
或者，您可以通过提供过滤器或类似的东西来限制提供给用户的数据量。如果筛选器匹配太多项目，您可以在您知道可以在浏览器中正常呈现的特定数量的项目处将其切断，并显示一条消息，说明出于性能原因，部分结果已隐藏。