leaflet - 如何在 Leafletjs 地图上获得最佳性能？我应该使用 256 像素还是 64 像素的瓷砖，有什么区别？

我在自定义地图（游戏世界地图）上使用 Leafletjs。这是一个 10240 像素的图像，我已正确设置它，但我注意到缩放和导航时有一些滞后行为。我的图块被自动 Photoshop 脚本正确切割，图块文件大小也得到了优化。

目前我的tilesize是leafletjs（256px）中的默认值。但我想知道如果使用 64px 瓷砖，性能会更好还是更差？什么时候应该使用 64px 的图块，什么时候应该使用 256px 或 512px 的图块？

我找不到能满足我对这个话题的好奇心的特定答案。我希望有人可以为我澄清一下。祝福！

标签： leaflettiles

欢迎来到 SO！

不幸的是，这是一个没有万能答案的性能优化主题。这类似于捆绑资产（CSS、JS）甚至将它们内联到 HTML 网页中的问题。

基本想法是减少向访问者显示有意义的信息所需的时间（有些人称为“第一次绘制”，尽管在交互式映射的情况下，您意识到这也包括导航时）。

更小（但更多）的文件有助于避免加载不必要的数据。对于映射，较小的图块意味着更少的额外数据（视口之外的部分图块），并且在 Leaflet 的情况下，整个图块的显示速度更快（因为 Leaflet 不显示部分图块，而是等待图块完全加载以显示它）。

更大（和更小）的文件有助于减少网络请求的数量（通常浏览器默认将每个域的同时请求限制为 2 个）和相关的开销（在数据和时间方面）。

当仅涉及地图图块时，一个粗略而简单的规则可能是：图块越详细和重，它们应该越小。但与往常一样，仍然需要尝试不同的设置。

至于同时请求的数量限制，“简单”的技巧，如果你可以在服务器端实现它，就是使用多个子域（它们仍然可以指向你完全相同的服务器文件）。