性能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

回答

相關問題