the Chromium logo

The Chromium Projects

Frame Rate Test

An effort to capture frame rate performance on various gestures and content.

Relevant files

The frame rate test is broken up into two three logical pieces:

  1. Test controller: src/chrome/test/perf/frame_rate/frame_rate_tests.cc
  2. JS test harness: src/chrome/test/data/perf/frame_rate/head.js
  3. Test content: src/chrome/test/data/perf/frame_rate/content/ (controlled via DEPS from svn/trunk/deps/frame_rate_content)

To checkout the content, add theses lines to your .gclient

Deps { "name" : "frame_rate_content", "url" : "svn://chrome-svn/chrome/trunk/deps/frame_rate/content", },

How to Run the Tests

  1. Build the performance_ui_tests binary.
  2. Tests come in two varieties: GPU-only or GPU-neutral.
    • Run tests that are GPU neutral: performance_ui_tests --gtest_filter=FrameRateTest*.
    • Run tests that are GPU accelerated: performance_ui_tests --gtest_filter=FrameRateTest* --enable-gpu

How It Works

frame_rate_tests.cc:

  • Contains the list of tests to run: look for FRAME_RATE_TEST macros.
  • Foreach test:
    • Starts up a standalone chrome, loads the page-under-test
    • Waits for head.js to indicate that the test has run
    • Reads performance results from the page, shoves them out in a way that Chrome dashboard code can understand

head.js

  • Registers (and constantly re-registers) a requestAnimationFrame callback and derives frame rate from that callback frequency.
  • If requested, will scroll the page to trigger page updating. Useful for web content, less useful for WebGL or Canvas apps.

Adding New Test Content

Scrolling test content, e.g. content that needs to be scrolled part of the test:

Self-rendering content, e.g. WebGL apps, or content that needs no external stimulation in order to render:

To debug the test outside of the test harness, open test.html and type __start('stationary') in the javascript console. Once the test runs, type __calc_results() to see the measured frame rate.

Content additions require codereview, using the standard contributing code process. Consider nduca@chromium.org and junov@chromium.org as reviewers.

Results

Frame rate tests run on the GPU waterfall.

They also run on the Perf waterfall, but they are not hardware-accelerated there.

1.  [XP Interactive
            Perf](http://build.chromium.org/p/chromium.perf/builders/XP%20Interactive%20Perf)
2.  [Mac10.5
            Perf(3)](http://build.chromium.org/p/chromium.perf/builders/Mac10.5%20Perf%283%29)
3.  [Mac10.6
            Perf(3)](http://build.chromium.org/p/chromium.perf/builders/Mac10.6%20Perf%283%29)
4.  [Old Mac10.6
            Perf(3)](http://build.chromium.org/p/chromium.perf/builders/Old%20Mac10.6%20Perf%283%29)
5.  [Linux Perf
            (2)](http://build.chromium.org/p/chromium.perf/builders/Linux%20Perf%20%282%29)
6.  [Linux Perf
            (lowmem)](http://build.chromium.org/p/chromium.perf/builders/Linux%20Perf%20%28lowmem%29)
> **([View all six
> here](http://build.chromium.org/p/chromium.perf/waterfall?branch=&builder=XP+Interactive+Perf&builder=Mac10.5+Perf%283%29&builder=Mac10.6+Perf%283%29&builder=Old+Mac10.6+Perf%283%29&builder=Linux+Perf+%282%29&builder=Linux+Perf+%28lowmem%29&reload=none))**

You can track the software rendered performance graphically using the performance dashboard. You may also click [results] from the perf waterfall to view the graph.

Gestures

Gestures are simply keyframe animations that are applied to the document scroll. The animations and their keyframes are stored in the __gestures object in head.js:

var __gestures = {
  steady: [
    {"time_ms":1, "y":0},
    {"time_ms":5, "y":10}
  ],
  reading: [
    {"time_ms":1, "y":0},
    {"time_ms":842, "y":40},
    ...
    {"time_ms":1170, "y":2373}
  ],
  mouse_wheel: [
    {"time_ms":1, "y":0},
    {"time_ms":164, "y":53},
    ...
    {"time_ms":421, "y":693}
  ],
  ...
};

You can either add keyframed animations to this list, or ask head.js to record a new gesture for you:

  1. Open a webpage to record from (must include head.js).
  2. Type __start_recording() in the javascript console.
  3. Perform any gestures you wish to record.
  4. Type __stop() in the javascript console.
  5. Copy the output from JSON.stringify(__recording) in the console.
  6. Paste the output in head.js as a new member of __gestures.
  7. Copy the formatting from other gestures.