jsPerf.app is an online JavaScript performance benchmark test runner & jsperf.com mirror. It is a complete rewrite in homage to the once excellent jsperf.com now with hopefully a more modern & maintainable codebase.

jsperf.com URLs are mirrored at the same path, e.g:

https://jsperf.com/negative-modulo/2

Can be accessed at:

https://jsperf.app/negative-modulo/2

memeory

Benchmark created on December 1, 2024

Preparation HTML

<script>
class Pixel_1 {
    constructor(_color) {
        this._color = _color;
    }
    render() {
        return { text: '%cx', color: `color: ${this._color}` };
    }
}
class Pixel_2 {
    static COLORS = {
        RED: "color: red",
        WHITE: "color: white",
    };
    static TEXTS = {
        X: "%cx",
    };
    constructor(color, text = Pixel_2.TEXTS.X) {
        this.color = color;
        this.text = text;
    }
    render() {
        return this;
    }
}
class Pixel_3 {
    static COLORS = {
        RED: "color: red",
        WHITE: "color: white",
    };
    static TEXTS = {
        X: "%cx",
    };
    constructor(color, text = Pixel_3.TEXTS.X) {
        this.color = color;
        this.text = text;
    }
}

class PixelFactory_1 {
    constructor() {
        this._pixels = {};
    }
    get(color) {
        if (!this._pixels[color]) {
            this._pixels[color] = new Pixel_1(color);
        }
        return this._pixels[color];
    }
}
class PixelFactory_2 {
    constructor() {
        this._pixels = {};
    }
    get(color) {
        if (!this._pixels[color]) {
            this._pixels[color] = new Pixel_2(color);
        }
        return this._pixels[color];
    }
}

class ImagePrinter_1 {
    render(image) {
        for (const row of image) {
            const rowText = [];
            const rowColors = [];
            for (const pixel of row) {
                const { text, color } = pixel.render();
                rowText.push(text);
                rowColors.push(color);
            }
            console.log(rowText.join(''), ...rowColors);
        }
    }
}
class ImagePrinter_2 {
    render(image) {
        for (const row of image) {
            const rowText = [];
            const rowColors = [];
            for (const pixel of row) {
                const { text, color } = pixel.render();
                rowText.push(text);
                rowColors.push(color);
            }
            console.log(rowText.join(''), ...rowColors);
        }
    }
}
class ImagePrinter_3 {
    set(image) {
        this.rows = [];
        for (const row of image) {
            const rowText = [];
            const rowColors = [];
            for (const { text, color } of row) {
                rowText.push(text);
                rowColors.push(color);
            }
            this.rows.push([rowText.join(''), ...rowColors]);
        }
    }
    render() {
        for (const row of this.rows) {
            console.log.apply(null, row);
        }
    }
}

const pf_1 = new PixelFactory_1();
const pf_2 = new PixelFactory_2();

const imageV_1 = [
    [pf_1.get('red'), pf_1.get('white'), pf_1.get('white'), pf_1.get('white'), pf_1.get('red')],
    [pf_1.get('red'), pf_1.get('white'), pf_1.get('white'), pf_1.get('white'), pf_1.get('red')],
    [pf_1.get('white'), pf_1.get('red'), pf_1.get('white'), pf_1.get('red'), pf_1.get('white')],
    [pf_1.get('white'), pf_1.get('red'), pf_1.get('white'), pf_1.get('red'), pf_1.get('white')],
    [pf_1.get('white'), pf_1.get('white'), pf_1.get('red'), pf_1.get('white'), pf_1.get('white')]
];
const imageV_2 = [
    [pf_2.get(Pixel_2.COLORS.RED), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.RED)],
    [pf_2.get(Pixel_2.COLORS.RED), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.RED)],
    [pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.RED), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.RED), pf_2.get(Pixel_2.COLORS.WHITE)],
    [pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.RED), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.RED), pf_2.get(Pixel_2.COLORS.WHITE)],
    [pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.RED), pf_2.get(Pixel_2.COLORS.WHITE), pf_2.get(Pixel_2.COLORS.WHITE)]
];
const imageV_3 = [
    [new Pixel_3(Pixel_3.COLORS.RED), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.RED)],
    [new Pixel_3(Pixel_3.COLORS.RED), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.RED)],
    [new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.RED), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.RED), new Pixel_3(Pixel_3.COLORS.WHITE)],
    [new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.RED), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.RED), new Pixel_3(Pixel_3.COLORS.WHITE)],
    [new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.RED), new Pixel_3(Pixel_3.COLORS.WHITE), new Pixel_3(Pixel_3.COLORS.WHITE)]
];

const printer_1 = new ImagePrinter_1();
const printer_2 = new ImagePrinter_2();
const printer_3 = new ImagePrinter_3();
const printer_3_once = new ImagePrinter_3();
printer_3_once.set(imageV_3);
</script>

Test runner

Ready to run.

Testing in
Test		Ops/sec
original	`printer_1.render(imageV_1);`	ready
improved memory	`printer_2.render(imageV_2);`	ready
render into state	`printer_3.set(imageV_3); printer_3.render();`	ready
render into state once	`printer_3_once.render();`	ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1: published on December 1, 2024