jsflot、html5 canvas 和 setInterval 的性能

Question

我正在开发一个网页，其中包含 9 个 jQuery 图表，更新为

setInterval(function(){
    updateGraph1to8(data1);
}, 10);

setInterval(function(){
    updateGraph9(data2);
}, 10);

和三个 HTML5 canvas 而是根据事件更新。其中两个基于 data1，因此它们被绘制在提供 data1 的事件函数中，例如：

onData1available(){
    //do math and stuff
    updateCanvas1();
    updateCanvas2();
}

而其余的则以data2为基础，以同样的方式绘制。

JS Flot图形在文档准备好后就不断绘制，完全没有延迟。当我激活 canvas（按下按钮时激活绘图）时，我注意到 Flot 图中有明显的滞后，但 none 在 canvas 中。我试图移动事件函数中绘制的 Flot 图，但一切都非常滞后。然后我尝试将 canvases 放入计时器中，但它并没有真正改变任何东西。我的问题是：

我真的遇到了性能瓶颈吗？（对我来说这是不可能的）
应该遵循的最佳实施方式是什么？
如何增强我的代码以避免延迟？
我认为异步编码是避免这种情况的好方法，那么为什么计时器不工作呢？是因为都是10ms调度的吗？顺序延迟是否可以改善这种情况？

解决方案：

http://jsfiddle.net/wMkJg/

Answer 1

解决方案：

使用 window.requestAnimationFrame 技巧解决

jsflot、html5 canvas 和 setInterval 的性能

performance with jsflot, html5 canvas and setInterval

html

javascript

canvas

flot