Add benchmark tests used in the optimization blog post

The same tests were also used by Martin Zmitko in his bachelor thesis. However, the 3D Canvas test was missing in the submitted files so that was added by me and might be different to the test in the thesis. I also added the logging of median that I used in the blog post.
polcak · Sep 20, 2023 · 76dadd3 · 76dadd3
1 parent 7909363
commit 76dadd3
Show file tree

Hide file tree

Showing 5 changed files with 475 additions and 0 deletions.
diff --git a/tests/benchmark/avfarbling.html b/tests/benchmark/avfarbling.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<title>Benchmark</title>
+
+	<script type="text/javascript" src="./files/math.js"></script>
+	<script type="text/javascript" src="./files/avfarbling.js"></script>
+	<link rel="stylesheet" type="text/css" href="./files/global.css">
+</head>
+<body>
+	<h1>Benchmark</h1>
+	<hr>
+
+	<h2 id="canvash">Canvas fingerprinting</h2>
+
+	<p>Make sure to disable Time precision wrappers of JSS to receive valid results in the
+	console.</p>
+
+	<div id="canvas-wrap-1">
+		<h3 id="canvasUp">Canvas frame</h3>
+		<canvas id="canvas1" width="10px" height="10px"></canvas>
+	</div>
+	<button id="getData" onclick="benchmark('canvas1');">Start benchmark</button>
+	<br>
+
+	<h2 id="audioh">Audio</h2>
+	<button id="play" onclick="audioBenchmark()">Start benchmark</button>
+
+	<div id="canvas-wrap-2">
+		<h3 id="canvasUp2">3D canvas</h3>
+		<canvas id="canvas2" width="10px" height="10px"></canvas>
+	</div>
+	<button id="getData" onclick="benchmark3d('canvas2');">Start benchmark</button>
+	<br>
+
+</body></html>
diff --git a/tests/benchmark/files/avfarbling.js b/tests/benchmark/files/avfarbling.js
@@ -0,0 +1,197 @@
+/** \file
+ * \brief This file contains performance test page for Canvas and Audio wrappers.
+ *
+ *  \author Copyright (C) 2023  Libor Polcak
+ *  \author Copyright (C) 2023  Martin Zmitko
+ *
+ *  \license SPDX-License-Identifier: GPL-3.0-or-later
+ */
+//
+//  This program is free software: you can redistribute it and/or modify
+//  it under the terms of the GNU General Public License as published by
+//  the Free Software Foundation, either version 3 of the License, or
+//  (at your option) any later version.
+//
+//  This program is distributed in the hope that it will be useful,
+//  but WITHOUT ANY WARRANTY; without even the implied warranty of
+//  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//  GNU General Public License for more details.
+//
+//  You should have received a copy of the GNU General Public License
+//  along with this program.  If not, see <https://www.gnu.org/licenses/>.
+//
+
+var results = [], result = [];
+var t, data;
+var runs = 10;
+var context, analyser;
+
+function rngArray(length) {
+    const arr = new Float32Array(length);
+    for (let i = 0; i < length; i++) {
+        arr[i] = Math.random() * 2 - 1;
+    }
+    return arr;
+}
+
+function resizeCanvas(canvas, width, height) {
+	canvas.width = width;
+	canvas.height = height;
+}
+
+function audioBenchmark() {
+    results = [], result = [];
+    runs = 10;
+    context = new(window.AudioContext || window.webkitAudioContext);
+
+    document.getElementById("audioh").textContent = `Audio ${runs}`;
+    setTimeout(testA2, 40, 10000);
+}
+
+function testA(i) {
+    const buffer = context.createBuffer(1, i, 44100);
+    const data = new Uint8Array(analyser.frequencyBinCount);
+    let t = performance.now();
+    analyser.getByteFrequencyData(data);
+    result.push(performance.now() - t);
+    if (data.length === results[i]) console.log(data); // This is to prevent the engine from optimizing the code
+    console.log(i);
+    if (i < 32768) setTimeout(testA, 40, i * 2); // 2^24
+    else {
+        if (runs > 1) {
+            runs--;
+            document.getElementById("audioh").textContent = `Audio ${runs}`;
+            results.push(result);
+            result = [];
+            setTimeout(testA, 40, 32);
+        } else {
+            document.getElementById("audioh").textContent = `Audio DONE`;
+            processResults();
+        }
+    }
+}
+
+function testA2(i) {
+    var buffer = context.createBuffer(1, i, 44100);
+    let t = performance.now();
+    data = buffer.getChannelData(0);
+    result.push(performance.now() - t);
+    if (data.length === results[i]) console.log(data); // This is to prevent the engine from optimizing the code
+    if (i < 1000000) setTimeout(testA2, 40, i + 10000);
+    else {
+        if (runs > 1) {
+            runs--;
+            document.getElementById("audioh").textContent = `Audio ${runs}`;
+            results.push(result);
+            result = [];
+            setTimeout(testA2, 40, 10000);
+        } else {
+            document.getElementById("audioh").textContent = `Audio DONE`;
+            processResults();
+        }
+    }
+}
+
+function benchmark(canvasId) {
+    results = [], result = [];
+    runs = 10;
+	var myCanvas = document.getElementById(canvasId);
+	var context = myCanvas.getContext("2d")
+    document.getElementById("canvash").textContent = `Canvas ${runs}`;
+    setTimeout(() => {
+        // Warm up the engine
+        for (var i = 1; i < 100; i += 10) {
+            resizeCanvas(canvasId, i, i);
+            data = context.getImageData(0, 0, context.canvas.width, context.canvas.height);
+            if (data.data.length === results[i]) console.log(data); // This is to prevent the engine from optimizing the code
+        }
+        // Run the tests
+        setTimeout(test, 40, 10, context, myCanvas);
+    }, 1000);
+}
+
+function test(i, context, canvas) {
+    resizeCanvas(canvas, i, i);
+    const width = context.canvas.width;
+    const height = context.canvas.height;
+    t = performance.now();
+    data = context.getImageData(0, 0, width, height);
+    result.push(performance.now() - t);
+    if (data.data.length === results[i]) console.log(data); // This is to prevent the engine from optimizing the code
+    if (i < 1000) setTimeout(test, 40, i + 10, context, canvas);
+    else {
+        if (runs > 1) {
+            runs--;
+            document.getElementById("canvash").textContent = `Canvas ${runs}`;
+            results.push(result);
+            result = [];
+            setTimeout(test, 40, 10, context, canvas);
+        } else {
+            processResults();
+            document.getElementById("canvash").textContent = `Canvas DONE`;
+        }
+    }
+}
+
+function benchmark3d(canvasId) {
+    results = [], result = [];
+    runs = 10;
+	var canvas = document.getElementById(canvasId);
+	var ctx = document.getElementById("canvas1").getContext("2d");
+	var gl = canvas.getContext("webgl2", { preserveDrawingBuffer: true}) ||
+		 canvas.getContext("experimental-webgl2", { preserveDrawingBuffer: true}) ||
+		 canvas.getContext("webgl", { preserveDrawingBuffer: true}) ||
+		 canvas.getContext("experimental-webgl", { preserveDrawingBuffer: true}) ||
+		 canvas.getContext("moz-webgl", { preserveDrawingBuffer: true});
+    document.getElementById("canvasUp2").textContent = `Canvas ${runs}`;
+    setTimeout(() => {
+        // Warm up the engine
+        for (var i = 1; i < 100; i += 10) {
+            resizeCanvas(canvasId, i, i);
+						var imgdata = ctx.createImageData(gl.canvas.width, gl.canvas.height);
+						gl.readPixels(0, 0, gl.canvas.width, gl.canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, imgdata.data);
+            if (imgdata.data.length === results[i]) console.log(imgdata); // This is to prevent the engine from optimizing the code
+        }
+        // Run the tests
+        setTimeout(test3d, 40, 10, gl, canvas, ctx);
+    }, 1000);
+}
+
+function test3d(i, gl, canvas, ctx) {
+    resizeCanvas(canvas, i, i);
+    const width = gl.canvas.width;
+    const height = gl.canvas.height;
+		var imgdata = ctx.createImageData(gl.canvas.width, gl.canvas.height);
+    t = performance.now();
+		gl.readPixels(0, 0, gl.canvas.width, gl.canvas.height, gl.RGBA, gl.UNSIGNED_BYTE, imgdata.data);
+    result.push(performance.now() - t);
+    if (imgdata.data.length === results[i]) console.log(imgdata); // This is to prevent the engine from optimizing the code
+    if (i < 1000) setTimeout(test3d, 40, i + 10, gl, canvas, ctx);
+    else {
+        if (runs > 1) {
+            runs--;
+            document.getElementById("canvasUp2").textContent = `Canvas ${runs}`;
+            results.push(result);
+            result = [];
+            setTimeout(test3d, 40, 10, gl, canvas, ctx);
+        } else {
+            processResults();
+            document.getElementById("canvasUp2").textContent = `Canvas DONE`;
+        }
+    }
+}
+
+function processResults() {
+    const medianArr = [];
+    const avgArr = [];
+
+    for (let i = 0; i < results[0].length; i++) {
+        const column = results.map(inner => inner[i]);
+        medianArr.push(math.median(column));
+        avgArr.push(math.mean(column));
+    }
+
+    console.log(results);
+    console.log(medianArr);
+    console.log(avgArr);
+}
diff --git a/tests/benchmark/files/global.css b/tests/benchmark/files/global.css
@@ -0,0 +1,62 @@
+/*
+ * SPDX-FileCopyrightText: 2019 Martin Timko
+ * SPDX-FileCopyrightText: 2021 Matúš Švancár
+ *
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+body {
+	font-family: Arial, Helvetica, sans-serif;
+}
+
+h1 {
+	font-size: 36px;
+}
+
+button {
+	font-size: 14px;
+	font-weight: bold;
+	cursor: pointer;
+}
+
+#canvas-wrap-1 button,
+#canvas-wrap-2 button {
+	width: 300px;
+	height: 28px;
+	float: right;
+	clear: both;
+}
+
+#getData {
+	height: 28px;
+}
+
+.bottom-buttons-wrap button {
+	width: 400px;
+	height: 50px;
+}
+
+#demo-image , #fp-image{
+	display: none;
+}
+
+canvas {
+	border: 1px solid #000000;
+}
+
+.flex {
+	display: flex;
+}
+.flex *{
+ padding-right: 10px;
+}
+.hide{
+	display:none;
+}
+#precisionList li span {
+	float: left;
+	width: 320px;
+}
+#audio_results div {
+	overflow: hidden;
+}
diff --git a/tests/benchmark/files/math.js b/tests/benchmark/files/math.js