submodule/skia/tools/perf-canvaskit-puppeteer/canvas_perf.html

   1 <!-- This benchmark run a lot of small benchmarks that are defined with a karma-like sytax
   2   in canvas_perf.js
   3 -->
   4 <!DOCTYPE html>
   5 <html>
   6 <head>
   7   <title>CanvasKit SKP Perf</title>
   8   <meta charset="utf-8" />
   9   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  10   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  11   <script src="/static/canvaskit.js" type="text/javascript" charset="utf-8"></script>
  12   <script src="/static/benchmark.js" type="text/javascript" charset="utf-8"></script>
  13   <script src="/static/canvas_perf.js" type="text/javascript" charset="utf-8"></script>
  14   <style type="text/css" media="screen">
  15     body {
  16       margin: 0;
  17       padding: 0;
  18     }
  19   </style>
  20 </head>
  21 <body>
  22   <main>
  23     <button id="start_bench">Start Benchmark</button>
  24     <br>
  25     <canvas id=anim width=600 height=600 style="height: 600px; width: 600px;"></canvas>
  26   </main>
  27   <script type="text/javascript" charset="utf-8">
  28     const WIDTH  = 600;
  29     const HEIGHT = 600;
  30     const WARM_UP_FRAMES = 5;
  31     // Keeping this a little lower because this test runs many smaller tests,
  32     // each for this many frames, which could add up to a long time.
  33     const MAX_FRAMES = 51;
  34
  35     // Any external files needed by tests in canvas_perf.js must be listed here.
  36     // And checked in under canvas_perf_assets/
  37     // tests may then fetch them from ctx.files['filename']
  38     const testDataFiles = [
  39       'test_64x64.png',
  40       'test_512x512.png',
  41       'test_1500x959.jpg',
  42       'Roboto-Regular.ttf',
  43       'Roboto-Regular.woff',
  44       'Roboto-Regular.woff2',
  45     ];
  46
  47     (function() {
  48       const filePromises = [];
  49       for (const filename of testDataFiles) {
  50         filePromises.push(fetch('/static/assets/'+filename).then((resp) => {
  51           return resp.arrayBuffer(); // this is also a promise.
  52         }));
  53       }
  54       const externals = Promise.all(filePromises).then((results) => {
  55         const files = {};
  56         let i=0;
  57         for (const bytes of results) {
  58           // store them by name
  59           files[testDataFiles[i]] = bytes;
  60           i++;
  61         }
  62         return files;
  63       });
  64
  65       const loadCanvasKit = CanvasKitInit({
  66         locateFile: (file) => '/static/' + file,
  67       });
  68
  69       Promise.all([loadCanvasKit, externals]).then(([CanvasKit, externalFiles]) => {
  70         const urlSearchParams = new URLSearchParams(window.location.search);
  71         let glversion = 2;
  72         if (urlSearchParams.has('webgl1')) {
  73           glversion = 1;
  74         }
  75         let surface = getSurface(CanvasKit, glversion);
  76         if (!surface) {
  77           console.error('Could not make surface', window._error);
  78           return;
  79         }
  80
  81         document.getElementById('start_bench').addEventListener('click', async () => {
  82           window._perfData = {};
  83
  84           // canvas_perf.js should have defined an array called tests whose objects have:
  85           //  setup:    A function called once before testing begins, it is expected to make its
  86           //            own canvas and put it in ctx.
  87           //  test:     A function called to draw one frame
  88           //  teardown: A function called after testing finishes
  89           //  description:     A human readable description
  90           //  perfkey:  A key used to save the results in perf.skia.org.
  91           //
  92           // For quick local bench testing, there is also an array called onlytests. This way
  93           // a developer can replace tests.push with onlytests.push to just run one or two
  94           // performance benchmarks they care about.
  95           let testsToRun = tests;
  96           if (onlytests.length) {
  97             testsToRun = onlytests;
  98           }
  99
 100           for (const t of testsToRun) {
 101             let ctx = {
 102               'surface': surface,
 103               'files': externalFiles,
 104             };
 105             console.log('Benchmarking "' + t.description + '"');
 106             t.setup(CanvasKit, ctx);
 107             function draw() {
 108               t.test(CanvasKit, ctx);
 109             }
 110             // TODO(nifong): is it ok to keep re-using the surface?
 111             results = await startTimingFrames(draw, surface, WARM_UP_FRAMES, MAX_FRAMES);
 112             t.teardown(CanvasKit, ctx);
 113             window._perfData[t.perfKey] = results;
 114
 115             // Delete and re-create surface between tests, to prevent the possibility of
 116             // interference between them through the state of surface, the gl context, or things
 117             // that are keyed by the surface's gen id.
 118             surface.delete();
 119             surface = getSurface(CanvasKit, glversion);
 120
 121             // TODO(nifong): provide a function similar to startTimingFrames for timing
 122             // non-visual tests.
 123           }
 124           surface.delete();
 125           window._perfDone = true;
 126         });
 127         console.log('Perf is ready');
 128         window._perfReady = true;
 129       });
 130     }
 131   )();
 132
 133   </script>
 134 </body>
 135 </html>