Last active
December 11, 2021 07:23
-
-
Save kawanet/4676a1804bb463ea558017b063d4c286 to your computer and use it in GitHub Desktop.
drawPixel(output, pos, ...color) is slow
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>benchmark</title> | |
</head> | |
<body> | |
Open DevTools | |
<script> | |
setTimeout(function() { | |
"use strict" | |
const length = 100000000; | |
const output = new Uint8ClampedArray(length); | |
const color = [255, 255, 255]; | |
function bench(name, fn) { | |
const date = Date.now(); | |
fn(); | |
console.log(name, "// => ", Date.now() - date, "ms"); | |
} | |
bench("drawPixel(output, pos, ...color)", function() { | |
for (let pos = 0; pos < length; pos++) { | |
drawPixel(output, pos, ...color); | |
} | |
}); | |
bench("drawPixel(output, pos, color[0], color[1], color[2])", function() { | |
for (let pos = 0; pos < length; pos++) { | |
drawPixel(output, pos, color[0], color[1], color[2]); | |
} | |
}); | |
bench("drawColorFn(output, color)(pos)", function() { | |
const drawPixel = drawColorFn(output, color); | |
for (let pos = 0; pos < length; pos++) { | |
drawPixel(pos); | |
} | |
}); | |
function drawPixel(output, pos, r, g, b) { | |
output[pos + 0] = r; | |
output[pos + 1] = g; | |
output[pos + 2] = b; | |
output[pos + 3] = 255; | |
} | |
function drawColorFn(output, c) { | |
const r = c[0]; | |
const g = c[1]; | |
const b = c[2]; | |
return function(pos) { | |
output[pos + 0] = r; | |
output[pos + 1] = g; | |
output[pos + 2] = b; | |
output[pos + 3] = 255; | |
}; | |
} | |
}, 1); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment