在后端/前端生成热图的优缺点是什么？

Question

我有一个测量空气污染的传感器网络。我想制作这种污染的热图，并在我的网站上向用户展示。

我正在考虑最好的方法。应该在后端还是前端生成热图？两种解决方案的优缺点是什么？任何细节 - 比如我应该以什么格式将热图发送到前端（也许使用 SVG？）将不胜感激。

我可以为后端生成的热图找到这些优点：

• 与其他服务轻松集成 - 例如，如果我想向 Slack 用户发送空气污染地图，我只需下载地图图块并将生成的热图放在上面。
• 易于进行更改 - 例如。如果我想更改生成热图的方式（例如颜色），我不必在所有其他地方更改它，例如网络应用、Android 应用、iOS 应用...

缺点：

• 可能有更多数据要发送给客户端。

此外，您能说出任何现实生活中的后端/前端生成的东西放在地图顶部的例子吗？

Answer 1

很难回答最佳解决方案是什么。这一切都取决于数据。

• 如果您说数据点数量适中，大约 50 到 100 个，并且更喜欢在高分辨率显示器上进行清晰的渲染，那么 SVG 就是您的最佳选择。
• 如果您有成百上千个数据点，那么使用 SVG 渲染这些数据点可能会成为客户端的性能杀手。在这种情况下，将所有内容渲染到服务器端的位图并将其发送到客户端。

例子：

• Google 地图（或任何其他地图服务）将地图呈现为服务器端的位图图块。浏览器中的经典谷歌地图（例如 ios Safari 显示谷歌地图）将无能为力。甚至街道名称也被渲染到位图。 （值得注意的是，在功能更强大的平台上，例如桌面 Chrome，事情会变得更加棘手。）

• JS 侧图表解决方案将在客户端呈现内容。对于多达数百个点的数据集来说看起来很棒。可悲的是，在现实生活中的数据上失败了（例如，在股市行业工作，“显示 Apple 的股票价格”之类的例子可以让这些解决方案屈服。（Apple 股票自 1990 年以来的所有价格变化 - 包括报价水平数据（所以每天成千上万的变化）是一个不同的联盟。

仅作记录，在最近的一个项目中，经过数月的开发工作，我们无法使基于画布的客户端渲染在所有平台上都能正常工作，因此选择了服务器端渲染并在 4 天内解决了问题工作。