jsflot、html5 canvas 和 setInterval 的性能答案

【问题标题】：performance with jsflot, html5 canvas and setIntervaljsflot、html5 canvas 和 setInterval 的性能
【发布时间】：2017-01-23 16:41:08
【问题描述】：

我正在开发一个包含 9 个 jQuery Flot 图表的网页，这些图表使用

进行了更新

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

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

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

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

而其余的则基于data2，并以相同的方式绘制。

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

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

解决方案：

http://jsfiddle.net/wMkJg/

【问题讨论】：

代码不多，实际上不足以解决问题。您有 10 毫秒的 2 个间隔，即每秒 100 * 8 + 100 个图表。查看 jsFlot 网站，他们看起来像是在考虑表现而不是表现。首先是为什么图表的更新速度快于 ~16 毫秒的显示刷新率（您在 9 个图表上每秒大约有 40 次渲染更新，总共有 360 个从未显示的图表渲染）。是的，当您过度启动设备时，您遇到了瓶颈。
我设置了 10 毫秒，因为在 50 毫秒时他们会结结巴巴，在 10 毫秒时，流程非常流畅。我试试 16ms，即使定时器是 100ms，你仍然可以感觉到延迟。
对我来说会滞后。但我没有信息来判断性能。无论如何，您不应该使用间隔计时器，您应该使用requestAnimationFrame，它会选择浏览器可以为您提供的任务管理的最佳帧速率。它还将同步到显示刷新，并让浏览器知道您正在制作动画，这样您就不会与页面渲染发生冲突。看看 jsflot，它不是为了做你想做的事情而构建的（猜测你想要 9 个实时绘图）
@Blindman67 明天我会发布一些关于 requestAnimationFrame 的新闻，你能推荐一个好的实时绘图库吗？这是link 一个好的解决方案吗？ flot 对我来说似乎不错link
@Blindman67 好的，我已经能够使用“著名的”polyfill 来允许 requestAnimationFrame。我的最后一个疑问是：浏览器中可达到的最大 fps 是否为 60？我问这个是因为如果我将 fps 增加到 60 以上，绘图会更加平滑。

标签： javascript html canvas flot

【解决方案1】：

解决方案：

使用 window.requestAnimationFrame 技巧解决

【讨论】：