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> 136
