requestAnimationFrame() проблема с производительностью

Question

У меня возникли проблемы с производительностью с requestAnimationFrame().

Рассмотрите следующий код. Это простой цикл, который печатает время с момента последнего кадра каждый раз, когда эта дельта больше 20 мс.

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()); 

Как я понял requestAnimationFrame этот фрагмент не должен печатать что-либо, потому что он пытается запустить 60 раз в секунду (60 Гц, как мой монитор). Поэтому временная дельта всегда должна быть примерно в пределах 16-17 мс.

Но он печатает раз около 33 мсек каждые несколько секунд. Почему?

Я испытал это на окнах 10 с Chrome 54 и Firefox 49. Я владеть i5-6600

---

UPDATE Вот вывод скрипта NIT в оконное и убунту. Windows, что вы делаете? для Windows 10 (PC): WIndows 8 (такой же нетбук, как показано ниже): Ubuntu (тот же нетбук, как описано выше):

Answer 1

Как заявил Трэвис J в комментариях, это связано с операционной системой.

Эта проблема с производительностью не отображается в Linux. Поэтому я ничего не могу с этим поделать.

Answer 2

Легко проверить свою гипотезу о том, что проблема связана с платформой, на которой вы работаете, - измерьте производительность.

В скором времени запустите requestAnimationFrame несколько раз, как вы это сделали, и отметьте отметку времени на каждом прогоне. После этого просто визуализируйте результаты.

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>

Вы можете запустить тот же моделирование на различных операционных системах и разных браузерах, чтобы увидеть, если вы можете сузить этот вопрос дальше.