D3js性能问题

Question

我正在编写一个流程管理器，它将显示同时运行的多个进程的状态。 我正在使用d3js绘制条形图，所以它会这样做： Build Process

现在我创建了这个网站： My Build Process 这种行为就像我需要的那样（在添加缩放并使其看起来像面前）。 如您所见，我有2项服务：

1. 获取构建的当前状态（这是在开始时绘制所有条形图。）
2. 只获取有效服务（获得此服务时，我将所有条形图一起增加）。

问题是，当我查看chrome cpu使用情况时，有时会得到20％以上。 我是这个因为我使用d3js。通过单击屏幕使用此示例bl.ocks.org/mbostock/1021841，我的CPU也能超过20％。

我在代码中所做的是每隔几秒我就会在屏幕上的每个矩形中添加更多像素，一切都是动态的，我不是一次性绘制所有内容。 在我完成一个矩形后，我将它替换到内存中的同一行中的下一个矩形（我有一个包含所有行的数组）。 所有代码都在一个循环中，直到完成该过程。 我的javascript代码：www.webmarkgroup.com/projects/overflow/includes/js/buildManager.js 您可以在JS文件的“setBars”函数中看到主代码 我无法想象如何使用转换可能会更快，或者可能每次从DB加载所有矩形。你觉得怎么样？

谢谢

Answer 1

查看chrome控制台中的性能选项卡，并在执行代码时执行一些录制。这将让您准确了解所有占用cpu周期的内容。我怀疑你可能遇到布局颠簸问题。看看使用fastdom这样的软件包有助于缓解您可能遇到的一些问题。