requestAnimationFrame（）パフォーマンスの問題

Question

requestAnimationFrame（）でパフォーマンスの問題が発生しました。

次のコードを検討してください。これは、この時間デルタが20msより大きいたびに最後のフレーム以降の時刻を出力する単純なループです。

const glob_time_info = {delta_time: 0.0, last_frame: performance.now()}; 

var render = function (timestamp) { 
    glob_time_info.delta_time = timestamp - glob_time_info.last_frame; 
    glob_time_info.last_frame = timestamp; 
    if(glob_time_info.delta_time > 20) 
     console.log(glob_time_info.delta_time); 
    requestAnimationFrame(render); 
}; 
render(performance.now()); 

私はそれが60回秒（私のモニタとして60Hzの）を実行しようとするため、このスニペットは、何かを印刷することはありませんrequestAnimationFrameのを理解できるように。 したがって、時間デルタは常に約16-17ms程度にする必要があります。

しかし、数秒ごとに約33msの時間が印刷されます。 なぜですか？

は、私がここでi5-6600

---

UPDATE 窓とUbuntu用NITのスクリプトの出力を所有クローム54とFirefox 49でWindows 10でこれを経験しました。 Windows、何してるの？ のWindows 10（PC）： のWindows 8（下記のように同じネットブック）： のUbuntu（上記と同じネットブック）：

Answer 1

トラヴィスJは、それは、オペレーティング・システムに関連のコメントで述べたように。

このパフォーマンスの問題は、Linuxでは発生しません。だから私はそれについて何もできません。

Answer 2

問題が実行中のプラットフォームに関連しているという仮説をテストするのは簡単です。パフォーマンスを測定します。

すぐに実行し、実行した回数と同じ回数だけ​​を実行し、実行ごとにタイムスタンプを書き留めます。その後、結果を視覚化するだけです。

var times = []; 
 
var measure = function() { 
 
    times.push(new Date().getTime()); 
 
    if (times.length > 100) return draw(); 
 
    requestAnimationFrame(measure); 
 
}; 
 
var draw = function() { 
 
    var dataset = { 
 
    x: [], 
 
    y: [], 
 
    type: 'bar' 
 
    }; 
 
    var layout = { 
 
    xaxis: { 
 
     title: 'measurement #' 
 
    }, 
 
    yaxis: { 
 
     title: 'iteration duration (ms)' 
 
    }, 
 
    height: 250 
 
    }; 
 
    var options = { 
 
    displayModeBar: false 
 
    }; 
 
    times.reduce(function(previous, current, i) { 
 
    dataset.x.push(i); 
 
    dataset.y.push(current - previous); 
 
    return current; 
 
    }, times.shift()); 
 
    Plotly.newPlot('target', [dataset], layout, options); 
 
} 
 
measure();

#target { 
 
    margin-top: -50px; 
 
}

<script src="https://cdn.plot.ly/plotly-1.2.0.min.js"></script> 
 
<div id="target"></div>

あなたが問題をさらに絞り込むことができるかどうかを確認するために、異なるオペレーティングシステムや異なるブラウザで同じシミュレーションを実行することができます。