JavaScript 准备好可视化大型数据集了吗？

Question

我们有一些数据（10-50 列，数十万行），我们通常在 Excel 中将其可视化为折线图或堆积条形图。
用户希望能够放大和缩小图表以深入了解各个样本，但此类操作确实让 Excel 屈服了。

我正在考虑将数据嵌入到 HTML 页面中，并使用内联 JavaScript 来处理浏览器中的可视化。像 flotr JS 图表库之类的东西将被用于图表。

1. 这是一个愚蠢的想法吗？
2. 浏览器准备好接受这种负载了吗？
3. 这是一个已解决的问题，我应该在提问之前更彻底地用谷歌搜索一下吗？

Answer 1

Javascript 可能已经准备好了，因为 javascript 本身已经变得相当快了。根据我的经验，浏览器通常没有准备好处理非常大的 DOM 结构。至少您会花费大量时间试图找出速度缓慢的原因。您还会发现许多“标准”javascript 库（想到原型/jquery）不适合处理“过大”的大型 DOM 结构。

准备好发现给定的操作在所有浏览器上都很慢，但最终发现在不同的浏览器上有 3-4 个不同的原因。这是基于使用适度超大 DOM 的经验。虽然当然有可能，但要获得不错的结果需要花费大量的工作。

Answer 2

我强烈推荐 Adam 的建议来进行一些基准测试和优化。我最近做了一些使用 Flot 绘制大型数据集的工作，并且在使用 Internet Explorer 时遇到了不太可接受的性能（例如，在绘制图表时，整个浏览器在我的开发人员盒子上挂起约 20 秒）。

Flot 使用

canvas

元素进行图表绘制，仅 Internet Explorer 9+ 支持。 Flot 使用 ExplorerCanvas 库为旧版本的 Internet Explorer 提供支持。该库使用 VML，通过 DOM 操作 VML 元素来绘制图形。

使用 Internet Explorer 8 脚本分析器我发现渲染绘图所花费的大部分时间都花在调用本机 insertAdjacentHTML 方法来创建 VML 元素。由于无法采取任何措施来提高对本机方法的调用的性能，因此我转而致力于减少绘制的数据点数量（进而减少在 DOM 中创建的 VML 元素）以获得可接受的性能。

如果您不需要或不关心对旧版本 Internet Explorer 的支持，那么您应该会发现 Flot/Flotr 非常有能力处理大型数据集。但如果您确实需要支持这些版本，请做好在绘制大型数据集图表时遇到性能问题的准备。

Answer 3

JavaScript 准备好可视化大型数据集了吗？

是的 - 该语言已经达到了可以在正确的环境中毫不费力地处理重要记录集并对其进行操作、可视化等的程度。语言本身很好。

这是一个愚蠢的想法吗？

不，事实上，您几乎可以信赖每台计算机都能够运行这种功能强大的跨平台语言。

浏览器准备好接受这种负载了吗？

有些可能是 - 取决于您实际采取的处理和操作。随着 Chrome 使用快速的 JavaScript 引擎，并且越来越多的人严重依赖它，JavaScript 速度之战被点燃。我认为这是一个完全有效的使用场景。

您需要为基准测试和优化做好准备，这意味着深入研究 JavaScript 的内部。请公布您的结果，以便弥补缺陷。