1*c8dee2aaSAndroid Build Coastguard WorkerMeasuring the performance of CanvasKit using Puppeteer and Chrome. 2*c8dee2aaSAndroid Build Coastguard Worker 3*c8dee2aaSAndroid Build Coastguard Worker## Initial setup 4*c8dee2aaSAndroid Build Coastguard Worker 5*c8dee2aaSAndroid Build Coastguard WorkerRun `npm ci` to install the dependencies need to run the tests. In //modules/canvaskit, run 6*c8dee2aaSAndroid Build Coastguard Worker`make release` to build the canvaskit that will be used. With modifications to the Makefile, 7*c8dee2aaSAndroid Build Coastguard Workerother builds (e.g. `make profile`) can be used as well. 8*c8dee2aaSAndroid Build Coastguard Worker 9*c8dee2aaSAndroid Build Coastguard WorkerIf needed, one can download the lottie-samples and/or skp assets from CIPD using the sk tool: 10*c8dee2aaSAndroid Build Coastguard Worker``` 11*c8dee2aaSAndroid Build Coastguard Workersk asset download lottie-samples ~/Downloads/lottie-samples 12*c8dee2aaSAndroid Build Coastguard Workersk asset download skps ~/Downloads/skps 13*c8dee2aaSAndroid Build Coastguard Worker``` 14*c8dee2aaSAndroid Build Coastguard Worker 15*c8dee2aaSAndroid Build Coastguard WorkerThe actual location that these assets can be downloaded to is not important - the Makefile assumes 16*c8dee2aaSAndroid Build Coastguard Workerthem to be in Downloads, but that can be modified by the local user. 17*c8dee2aaSAndroid Build Coastguard Worker 18*c8dee2aaSAndroid Build Coastguard Worker## Basic Performance Tests 19*c8dee2aaSAndroid Build Coastguard WorkerWe have a harness for running benchmarks. Benchmark code snippets can be added to `canvas_perf.js`. 20*c8dee2aaSAndroid Build Coastguard WorkerThe harness itself is the `canvas_perf.html` and `benchmark.js`. It will run the "test" portion of 21*c8dee2aaSAndroid Build Coastguard Workerthe code on multiple frames and gather data. 22*c8dee2aaSAndroid Build Coastguard Worker 23*c8dee2aaSAndroid Build Coastguard WorkerTo run the benchmarks, run `make perf_js`. By default, this will use the most recent release build 24*c8dee2aaSAndroid Build Coastguard Workerof canvaskit done locally. If you want to only run one or a few, modify the 25*c8dee2aaSAndroid Build Coastguard Worker`canvas_perf.js` file by changing the relevent `tests.push` to `onlytests.push` and then run 26*c8dee2aaSAndroid Build Coastguard Worker`make perf_js`. 27*c8dee2aaSAndroid Build Coastguard Worker 28*c8dee2aaSAndroid Build Coastguard WorkerOn the CI, the results from these tests are uploaded to Perf. For example: 29*c8dee2aaSAndroid Build Coastguard Worker<https://perf.skia.org/e/?queries=test%3Dcanvas_drawOval> 30*c8dee2aaSAndroid Build Coastguard WorkerWe include metrics such as the 90th, 95th, and 99th percentile frame, average frame time, median 31*c8dee2aaSAndroid Build Coastguard Workerframe time, and standard deviation. There are three types of measurements: without_flush_ms is 32*c8dee2aaSAndroid Build Coastguard Workerthe measurement of the test() function; with_flush_ms is the measurement of test() and the 33*c8dee2aaSAndroid Build Coastguard Workersubsequent flush() call; total_frame_ms is the frame-to-frame time. Frame-to-frame is important to 34*c8dee2aaSAndroid Build Coastguard Workermeasure because it accounts for any work the GPU needs to do, even after CanvasKit flushes. 35*c8dee2aaSAndroid Build Coastguard Worker 36*c8dee2aaSAndroid Build Coastguard Worker## Skottie Frames Performance 37*c8dee2aaSAndroid Build Coastguard WorkerThere is a harness that gathers data about rendering 600 frames of a skottie animation, cycling 38*c8dee2aaSAndroid Build Coastguard Workerthrough it in a similar fashion to how it would be displayed to a user (e.g. as it is on 39*c8dee2aaSAndroid Build Coastguard Workerskottie.skia.org). 40*c8dee2aaSAndroid Build Coastguard Worker 41*c8dee2aaSAndroid Build Coastguard WorkerTo test it locally with a specific skottie animation, feel free to modify the Makefile to adjust the 42*c8dee2aaSAndroid Build Coastguard Worker`input_lottie` argument and then run `make frames`. The harness itself is `skottie-frames.html` and 43*c8dee2aaSAndroid Build Coastguard Worker`benchmark.js`. 44*c8dee2aaSAndroid Build Coastguard Worker 45*c8dee2aaSAndroid Build Coastguard WorkerOn the CI, the results from these tests are uploaded to Perf. For example: 46*c8dee2aaSAndroid Build Coastguard Worker<https://perf.skia.org/e/?queries=test%3Dlego_loader> 47*c8dee2aaSAndroid Build Coastguard WorkerWe include metrics such as the first 5 frame times, average frame times, 90th, 95th and 99th 48*c8dee2aaSAndroid Build Coastguard Workerpercentile frame time. 49*c8dee2aaSAndroid Build Coastguard Worker 50*c8dee2aaSAndroid Build Coastguard Worker## SKP Performance 51*c8dee2aaSAndroid Build Coastguard WorkerThere is a harness that repeatedly will draw an SKP and measure various metrics. This is handled 52*c8dee2aaSAndroid Build Coastguard Workerby `skottie-frames.html` and `benchmark.js`. As before, feel free to modify the Makefile (the 53*c8dee2aaSAndroid Build Coastguard Worker`input_skp` argument) and run `make skp`. 54*c8dee2aaSAndroid Build Coastguard Worker 55*c8dee2aaSAndroid Build Coastguard WorkerOn the CI, the results from these tests are uploaded to Perf. For example: 56*c8dee2aaSAndroid Build Coastguard Worker<https://perf.skia.org/e/?queries=binary%3DCanvasKit%26test%3Ddesk_chalkboard.skp>