elm - 如何使拼贴画(有很多容器)在 Elm 中更具响应性？

Question

我正在写一个 roguelike在 Elm ，其中有一个离散的 50x50 网格(参见 share-elm.com snippet )。 Roguelike 是一种视频游戏，其中对象(如敌人、元素、墙壁等)由 ASCII 字符表示。因此，我应该能够拥有数百个不同的 ASCII 字符，并在矩形网格中对齐。每个字符都应严格位于其网格单元格内。

为了创建这个网格，我将每个字符都放在一个正方形中 container (实际游戏容器大小的 1/50)。这意味着我最多可以在游戏中拥有 2500 个容器。 Elm 创建 <div>容器元素，即使我将这些容器转换为 Form并将它们放在 collage 中.这使我的 Firefox 39.0 性能非常慢。

如何在其网格单元格内创建一个具有良好对齐的 ASCII 字符(可能还有一些其他图形元素)的矩形网格，以便无论我同时拥有多少元素，拼贴仍然保持快速和响应？每次我在拼贴画中编写包含大量容器和其他元素的程序时，一般惯用的方法是什么？或者也许有一种完全不同的方法可以在 Elm 中创建活泼的矩形网格？

Answer 1

一种可能性(如果您不介意编写一些 HTML 而不是使用 collage/container)是使用 Html.Lazy模块。例如，您可以将显示的每一“行”的渲染包装在 lazy 中，它只会重新渲染更改的行(每个时间步长/移动应该只有 1-2 行) ).