我尝试创建 10 个折线图，它们都有 3000 点，300*300 svg 大小。它使我的浏览器崩溃，我检查了任务管理器，谷歌渲染器因内存利用率 1.2G 和 CPU 利用率 100% 而变得疯狂。
问问题
651 次
1 回答
2
像这样的事情没有简单的解决方案。您可以仔细检查您的代码并使其尽可能高效，但无论如何，如果您的代码需要在一个“线程”中执行数十万次操作，事情就会冻结。
避免这种冻结的一般解决方案是将绘图过程拆分为较小的任务，您可以异步调用这些任务（即从内部 a setTimeout）。这样，浏览器在运行 JS 代码时不会长时间锁定，也许（我不是这方面的专家）垃圾收集器也有机会在中途清理东西。
结果不是更快的整体绘制时间，而是对用户来说它“感觉”更快，因为浏览器不会冻结。然后你甚至可以添加一个进度条。
一些绘图操作不能分解为子任务。例如，您不能 splitsvg.line()生成图形路径定义的 d3 函数。但是，您可以拆分 10 个图表的绘制代码，使其在 a 的每个刻度上一次绘制一个图表setTimeout。您也可以类似地从实际绘图中拆分数据的准备。
我写了一个不同场景的答案，但这里有一个类似的问题：CSS transitions blocked by JavaScript
于 2013-05-20T21:59:34.997 回答