javascript - 具有大量文本的 HTML 地图的性能

Question

我正在尝试创建一个简单的平面图 HTML 页面，该页面具有一些几何元素（矩形、圆形）在各种转换中，并且主要是许多小文本标签。
到目前为止，我已经为此测试了一些方法：

1. 将所有内容都放在一个 SVG 中，用户可以平移和放大和缩小。这工作正常，但缩放的动画非常缓慢并且有很大的延迟。查看分析器，花费的时间主要是“布局”
2. 与 1 相同，单个 SVG，但将许多<text>元素替换为在初始化时通过渲染到不可见画布并使用toDataURL(). 这使得缩放动画非常快，但现在页面的初始化时间从 500 毫秒增加到 5 秒，增加了 10 倍。
3. 同 2，但在服务器上离线生成图像。这减少了初始化时间，但增加了带宽，并且在网络不稳定的移动设备上（将使用它）的总加载时间仍然在几秒钟左右。

没有办法赢吗？我正在寻找的是一些解决方案，它将具有 1.（500 毫秒）的低加载时间和 2 的缩放速度。

标签： javascripthtmlperformancesvgcanvas