1 / 25

Understanding PerfMarks: Benchmarking HTML5 Rendering Performance Across Platforms

PerfMarks offers a deep dive into benchmarking HTML5 rendering performance for games and apps. With various rendering methods like CSS2D, CSS3D, WebGL, and canvas, it allows developers to analyze mobile browser performance accurately. This guide details the methodology behind effective benchmarking, dealing with challenges such as JIT compilation, image loading latency, and memory management. By employing strategies like warm-up runs and retrieval algorithms, developers can obtain reliable data for ensuring smooth user experiences across platforms, from mobile browsers to desktop environments.

xantha-dennis
Télécharger la présentation

Understanding PerfMarks: Benchmarking HTML5 Rendering Performance Across Platforms

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

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 = Date.now();var maxDraws =100;var numDraws =0;function next(){for(var i =0; i < numObjects;++i){        renderObject(i);}++numDraws;if(numDraws >= maxDraws){var testEnd = Date.now();        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";

  10. DERP

  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 • Generate Test Data • Run Tests • 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 = Date.now();var numDraws =0;function next(){    setTimeout(next, 0);for(var i =0; i < numObjects;++i){        renderObject(i);}++numDraws;var frameEnd = Date.now();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 = Date.now();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 • http://spaceport.io/community/perfmarks • https://github.com/sibblingz/PerfMarks

More Related