性能jsflot，HTML5画布和setInterval

我开发了具有9个与性能jsflot，HTML5画布和setInterval

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

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

和三个HTML5画布这反而是对事件更新的更新jQuery的海军报图的网页。他们的两个基于data1所以他们得出像供应data1事件函数内部：剩下的就是基于data2并以同样的方式被绘制

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

。

JS文件准备就绪后，会不断绘制JS Flot图形，它们根本没有滞后。当我激活画布时（按下按钮时绘图被激活），我注意到Flot图中有一个明显的延迟，但画布中没有任何延迟。我试图在事件函数中移动绘图图形，但一切都落后于地狱。然后我试着把画布放在计时器中，但它并没有改变任何东西。我的问题是：

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

SOLUTION：

http://jsfiddle.net/wMkJg/

来源

2016-09-25 user217354

没有太多的代码去了解决，其实还不足以解决问题。你有两个10ms的间隔，每秒100 * 8 + 100个图表。看着jsFlot网站，他们看起来像是在介绍性能的介绍。首先，为什么图表的刷新速度要比~16ms的显示刷新速度更快（在9张图表上，每秒约有40个渲染更新，总共360个从未显示的图表渲染）。是的，当你正在启动设备时，你正在遇到瓶颈。 – Blindman67

我设置了10毫秒，因为在50毫秒时他们口吃，在10毫秒时流量很好，很流畅。我会在16ms尝试，即使定时器在100ms，你仍然可以感受到延迟。 – user217354

对我的期望是可以预料的。但我没有资料来评判表演。你不应该使用间隔定时器，你应该使用'requestAnimationFrame'，它会选择浏览器可以管理的最佳帧速率来完成你给它的任务。它也会同步到显示刷新，并让浏览器知道你在动画，所以你不会与页面渲染发生冲突。看着jsflot它不是为了做你正在做的事情而做的（通过你想要9个实时地块的事实来猜测） – Blindman67

SOLUTION：

使用window.requestAnimationFrame招

来源

2017-01-23 08:41:08 user217354

性能jsflot，HTML5画布和setInterval

回答

相关问题