andyedinborough / stress-css

JavaScript to test each CSS class on a page and report which are hindering performance
869 stars 40 forks source link

More accurate cross-browser timing #2

Closed mathiasbynens closed 13 years ago

mathiasbynens commented 13 years ago

Just a heads up — it looks like you’re using Pattern A to measure the time interval. This may not be accurate (enough) across browsers and platforms. See the link I provided for more information, and feel free to check out the Benchmark.js source code for some alternatives.

andyedinborough commented 13 years ago

Actually I am using pattern B. The function below runs once per class. It records the time at the beginning and then at the end--so the time is recorded over the course of n (times) tests.

function stress(state, times, finish) {
    var now = +new Date, //the test is starting
      work = function () {
          window.scrollBy(0, times % 2 == 0 ? 100 : -100);
      };
    times *= 2; //each test consists of scrolling down, and then back up

    bind(window, 'scroll.stressTest', function () {
        if (--times && !state.cancel) {
            setTimeout(work, 0);
        } else {
            unbind(window, 'scroll.stressTest');
            finish((+new Date) - now); //the test is over
        }
    });

    work();
}
mathiasbynens commented 13 years ago

Well the same applies for Pattern B, really. Check out the “Inaccurate millisecond timers” section in the article for the most poignant problem.