我目前正在开发一个基于 javascript 的地图生成器应用程序，我已经编写了 400 多行代码，用于创建六边形地图，为瓷砖添加坐标，在草、海洋和城堡、单位等元素上添加纹理.
我在这个离线地图编辑器中添加了很多有用的功能，比如放大和缩小，打开/关闭网格，拖动地图等等，我目前正在研究如何添加保存和加载功能到这个离线游戏地图编辑器。
它有点像一个绘画应用程序，除了绘制像素，你用它来绘制一个带有十六进制图块的地图。您只需单击 Generate a new map 并提供所需的地图大小（例如 64 块宽度 x 64 块高度）并为您绘制地图，这些块是简单的 div，具有相对背景图像作为纹理。使用简单的 for 循环，一张一张地绘制瓷砖。但随着代码规模的扩大，我的担忧也随之增加。
因为我在自己的地图编辑器上创建的地图将用于在线多人游戏，所以它会很大！比如在即将到来的游戏中支持至少20000个用户至少应该有20000个瓷砖，只供用户占据，更不用说他们将拥有的领土，山脉，丛林，野蛮部落等等。
我进行了计算，发现一张 512 x 512（约 262000 个图块）的地图足以满足这么多用户的需求。但是，地图会很大。所以我决定测试并查看使用我以尽可能少的过程创建的代码制作这样一张地图需要多少加载时间，我发现这需要将近一分钟或更长时间，这是不可接受的，从玩家视角。
例如，在如此巨大的地图中放大将意味着循环遍历每 262000 个图块以更改其大小。虽然这个过程比从头开始绘制/加载地图花费的时间更少，但它仍然很慢。
我在想一张地图太大了，连浏览器的窗口都放不下，我为什么要画整个地图？为什么不加载用户当前正在查看的部分。仅加载/绘制需要的部分，这样可以减少加载时间并提高性能。但这被证明是一个真正的挑战，网上关于实现这种功能的资源非常有限。从哪儿开始？如何处理问题和相应的解决方案？