Presentation is loading. Please wait.

Presentation is loading. Please wait.

PerfMarks Benchmarking HTML5 Rendering Performance.

Similar presentations

Presentation on theme: "PerfMarks Benchmarking HTML5 Rendering Performance."— Presentation transcript:

1 PerfMarks Benchmarking HTML5 Rendering Performance

2 Why did we make PerfMarks? Spaceport: Develop games with Adobe tools, publish to cross-platform mobile apps Native apps AND HTML5 web-apps What should we use? – CSS2D, CSS3D, WebGL, canvas? Rendering Performance matters Which is best for mobile browsers Benchmark it

3 Methodology HTML5 games: – Translation – Scaling – Rotation How many images can be moved around while maintaining 30 FPS? Easy to measure... right?

4 Accurate Benchmarking is hard Lots of complications – JIT – latency – memory – screen updates Getting data takes a long time Results require scrutiny

5 Try #1: Draw 100 frames – time it var testStart =; var maxDraws = 100; var numDraws = 0; function next() { for (var i = 0; i = maxDraws) { var testEnd =; done(testEnd - testStart); } else { setTimeout(next, 0); } } next();

6 Expected Results

7 Actual Results

8 JIT Just in time engine kicks in for later runs of the test – making benchmark results depend on the order the tests are run. Invalid results. Solution: warm up the JIT by running the tests twice – take data from second run.

9 Next Issue var img = new Image(); img.onload = function onloaded() { // img is loaded! var copy = img.cloneNode(true); // is copy loaded? }; img.src = "foo.png";


11 Image Loading Latency In certain browsers image not loaded – Android Browser – Mobile Firefox – Opera – Desktop Safari Absurdly high benchmark scores Solution: Add more onLoad() checks – TONS of redundant onLoad() checks...

12 How many objects to run? First pass was [1, 3, 5, 10, 30, 100] Next pass was add 25 until it's no longer making 30 FPS – then increment by a smaller step size. Problems:

13 Real world data is fuzzy!

14 Real world data is large! Counting to 7000 by 25 takes a long time Especially when you are testing 3 mobile browsers on a dozen Android phones

15 A Better Algorithm Run Test – estimate time/object/frame Use estimate to predict the number of objects that will run at exactly 30 FPS Repeat until predicted number of objects has already been tested Ensure that there are also data-points above and below

16 Next problem - Memory 1.Generate Test Data 2.Run Tests 3.Destroy Test Data This kills the Garbage Collector This will hard-crash most mobile browsers

17 A Better Approach Cache test data When more data is requested than has been generated – add on to the cached values. Clear out all test data when the test is completely finished.

18 Does the screen update? var testStart =; var numDraws = 0; function next() { setTimeout(next, 0); for (var i = 0; i < numObjects; ++i) { renderObject(i); } ++numDraws; var frameEnd =; var fpsEstimate = 1000 * numDraws / (frameEnd - testStart); } next();

19 Asynchronous Screen Updates

20 "requestAnimationFrame" "requestAnimationFrame" only happens in modern browsers if it's actually rendering to the screen. This let's us count the number of times the screen was actually updated during a test run

21 More Accurate Frame Counting function next() { requestAnimationFrame(next, element); for (var i = 0; i < numObjects; ++i) { renderObject(i); } ++numDraws; var frameEnd =; var fpsEstimate = 1000 * numDraws / (frameEnd - testStart); } requestAnimationFrame(next, element);

22 Results Modern Smartphone vs Modern Laptop Macbook Pro vs iPhone 4S – iOS 5.1 – Mobile Safari vs Safari 5.1 (Webkit) Macbook Pro vs Samsung Galaxy S2 – Android 4.0.3 – Mobile Chrome Beta vs Chrome 19

23 Safari

24 Chrome

25 PerfMarks

Download ppt "PerfMarks Benchmarking HTML5 Rendering Performance."

Similar presentations

Ads by Google