Benchmark: add react-blockies

bpierre · Sep 21, 2023 · ad7233c · ad7233c
1 parent 53f73b3
commit ad7233c
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 45 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 ## Features
 
 - 🐥 **Small**: **[0.67 KB](https://bundlejs.com/?bundle&q=blo)** gzipped.
-- ☄️ **Fast**: **[4.7x faster](#library-comparison)** than the second fastest solution.
+- 💥 **Fast**: **[3.5x faster](#library-comparison)** than the second fastest solution.
 - 🔍 **Optimized**: Leverages SVG to generate compact and sharp images at any size.
 - 💆 **Simple**: Focuses on Ethereum identicons only, allowing for a simpler API.
 - 🗂 **Typed**: Ships with [types included](#types).
@@ -18,13 +18,14 @@
 
 ## Library Comparison
 
-| Library                               |             Renders/sec[^1] | Size                                                                                                       | Types                                        | Environment[^2]                                |   Rendering |
-| ------------------------------------- | --------------------------: | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------- | ----------: |
-| <b>blo</b>                            | <nobr><b>☄️ 7,862</b></nobr> | [![](https://img.shields.io/badge/0.67kB-6ead0a)](https://bundlejs.com/?bundle&q=blo)                      | ![](https://img.shields.io/badge/yes-6ead0a) | ![](https://img.shields.io/badge/all-6ead0a)   |         SVG |
-| <nobr>ethereum-blockies-base64</nobr> |                         948 | [![](https://img.shields.io/badge/2.75kB-ee4433)](https://bundlejs.com/?bundle&q=ethereum-blockies-base64) | ![](https://img.shields.io/badge/no-ee4433)  | ![](https://img.shields.io/badge/all-6ead0a)   |         PNG |
-| <nobr>@download/blockies</nobr>       |                         361 | [![](https://img.shields.io/badge/0.67kB-6ead0a)](https://bundlejs.com/?bundle&q=%6ead0a%2Fblockies)       | ![](https://img.shields.io/badge/no-ee4433)  | ![](https://img.shields.io/badge/dom-ee4433)   |      Canvas |
-| <nobr>blockies-react-svg</nobr>       |                       1,675 | [![](https://img.shields.io/badge/4kB-ee4433)](https://bundlejs.com/?bundle&q=blockies-react-svg)          | ![](https://img.shields.io/badge/yes-6ead0a) | ![](https://img.shields.io/badge/react-ee4433) | SVG (React) |
-| <nobr>blockies-ts</nobr>              |                         381 | [![](https://img.shields.io/badge/1.31kB-6ead0a)](https://bundlejs.com/?bundle&q=blockies-ts)              | ![](https://img.shields.io/badge/yes-6ead0a) | ![](https://img.shields.io/badge/dom-ee4433)   |      Canvas |
+| Library                               |              Renders/sec[^1] | Size                                                                                                       | Types                                        | Environment[^2]                                | Rendering |
+| ------------------------------------- | ---------------------------: | ---------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------------------------------- | --------: |
+| <b>blo</b>                            | <nobr><b>💥 8,197</b></nobr> | [![](https://img.shields.io/badge/0.67kB-6ead0a)](https://bundlejs.com/?bundle&q=blo)                      | ![](https://img.shields.io/badge/yes-6ead0a) | ![](https://img.shields.io/badge/all-6ead0a)   |       SVG |
+| <nobr>ethereum-blockies-base64</nobr> |                          807 | [![](https://img.shields.io/badge/2.75kB-ee4433)](https://bundlejs.com/?bundle&q=ethereum-blockies-base64) | ![](https://img.shields.io/badge/no-ee4433)  | ![](https://img.shields.io/badge/all-6ead0a)   |       PNG |
+| <nobr>blockies-react-svg</nobr>       |                        1,749 | [![](https://img.shields.io/badge/4kB-ee4433)](https://bundlejs.com/?bundle&q=blockies-react-svg)          | ![](https://img.shields.io/badge/yes-6ead0a) | ![](https://img.shields.io/badge/react-ee4433) |       SVG |
+| <nobr>@download/blockies</nobr>       |                          334 | [![](https://img.shields.io/badge/0.67kB-6ead0a)](https://bundlejs.com/?bundle&q=%6ead0a%2Fblockies)       | ![](https://img.shields.io/badge/no-ee4433)  | ![](https://img.shields.io/badge/dom-ee4433)   |    Canvas |
+| <nobr>blockies-ts</nobr>              |                          342 | [![](https://img.shields.io/badge/1.31kB-6ead0a)](https://bundlejs.com/?bundle&q=blockies-ts)              | ![](https://img.shields.io/badge/yes-6ead0a) | ![](https://img.shields.io/badge/dom-ee4433)   |    Canvas |
+| <nobr>react-blockies</nobr>           |                        2,361 | [![](https://img.shields.io/badge/4.72kB-ee4433)](https://bundlejs.com/?bundle&q=react-blockies)           | ![](https://img.shields.io/badge/no-ee4433)  | ![](https://img.shields.io/badge/react-ee4433) |    Canvas |
 
 [^1]: The number of renders per second. It was measured on Chrome 117 Linux with an AMD Ryzen 7 PRO 4750U. [See ./benchmark](./benchmark) for the methodology.
 

diff --git a/benchmark/declarations.d.ts b/benchmark/declarations.d.ts
@@ -14,11 +14,14 @@ declare module "blockies-react-svg/dist/es/BlockiesSvgSync.mjs" {
   }): JSX.Element;
 }
 
-declare module "blockies-react-svg/dist/es/makeBlockiesUrl.mjs" {
-  export default function makeBlockiesUrl(
-    address: string,
-    size?: number,
-    caseSensitive?: boolean,
-    scale?: number,
-  ): string;
+declare module "react-blockies" {
+  export default function Blockies(props: {
+    seed: string;
+    size?: number;
+    scale?: number;
+    color?: string;
+    bgColor?: string;
+    spotColor?: string;
+    className?: string;
+  }): JSX.Element;
 }
diff --git a/benchmark/package.json b/benchmark/package.json
@@ -24,6 +24,7 @@
     "blockies-ts": "^1.0.0",
     "rand-seed": "^1.0.2",
     "react": "^18.2.0",
+    "react-blockies": "^1.4.1",
     "react-component-benchmark": "^2.0.0",
     "react-dom": "^18.2.0"
   }

diff --git a/benchmark/pnpm-lock.yaml b/benchmark/pnpm-lock.yaml
diff --git a/benchmark/src/Benchmark.tsx b/benchmark/src/Benchmark.tsx
@@ -5,6 +5,7 @@ import BlockiesSvgSync from "blockies-react-svg/dist/es/BlockiesSvgSync.mjs";
 import * as blockiesTs from "blockies-ts";
 import makeBlockie from "ethereum-blockies-base64";
 import { useRef, useState } from "react";
+import ReactBlockies from "react-blockies";
 import { Benchmark } from "react-component-benchmark";
 import { blo } from "../../src";
 
@@ -16,54 +17,74 @@ const randomAddress = () => {
       const char = Math.floor(Math.random() * 16).toString(16);
       return Math.random() > 0.5 ? char : char.toUpperCase();
     }).join("")
-  }` as `0x${string}`;
+  }`;
 };
 
-const addresses = Array.from({ length: SAMPLES }).map(randomAddress);
+const addresses = Array.from({ length: SAMPLES * 10 }).map(randomAddress);
 
 let i = 0;
-function nextAddress(): `0x${string}` {
-  return addresses[i = (i + 1) % SAMPLES];
+function nextAddress() {
+  return addresses[i = (i + 1) % SAMPLES] as `0x${string}`;
 }
 
-const BENCHMARKS: Record<string, () => JSX.Element> = {
-  "blo": () => (
+// All benchmarks are rendering a 64x64 image on a @2x display,
+// which requires to render the raster images at 128x128.
+const BENCHMARKS: Record<
+  string,
+  ({ address }: { address: `0x${string}` }) => JSX.Element
+> = {
+  "blo": ({ address }) => (
     <img
-      src={blo(nextAddress())}
+      width={64}
+      height={64}
+      src={blo(address)}
     />
   ),
-  "ethereum-blockies-base64": () => (
+  "ethereum-blockies-base64": ({ address }) => (
     <img
       width={64}
       height={64}
-      src={makeBlockie(nextAddress())}
+      src={makeBlockie(address)}
     />
   ),
-  "blockies-react-svg": () => (
+  "blockies-react-svg": ({ address }) => (
     <BlockiesSvgSync
       size={8}
       scale={8}
-      address={nextAddress()}
+      address={address}
     />
   ),
-  "@download/blockies": () => (
+  "@download/blockies": ({ address }) => (
     <img
+      width={64}
+      height={64}
       src={blockiesCreateIcon({
-        seed: nextAddress().toLowerCase(), // @download/blockies doesn’t lowercase automatically so we do it here
-        scale: 8,
+        seed: address.toLowerCase(),
+        scale: 16,
         size: 8,
       }).toDataURL()}
     />
   ),
-  "blockies-ts": () => (
+  "blockies-ts": ({ address }) => (
     <img
+      width={64}
+      height={64}
       src={blockiesTs.create({
-        seed: nextAddress().toLowerCase(), // blockies-ts doesn’t lowercase automatically so we do it here
-        scale: 8,
+        seed: address.toLowerCase(),
+        scale: 16,
         size: 8,
       }).toDataURL()}
     />
   ),
+  "react-blockies": ({ address }) => (
+    // className is used to force the display size to 64x64
+    <ReactBlockies
+      className="react-blockies"
+      seed={address.toLowerCase()}
+      scale={16}
+      size={8}
+    />
+  ),
 } as const;
 
 export default function App() {
@@ -154,19 +175,24 @@ export default function App() {
                 </td>
                 <td>
                   <div className="render-zone">
-                    <Benchmark
-                      ref={refs[name]}
-                      component={Component}
-                      onComplete={(result) => {
-                        setResults((r) => ({
-                          ...r,
-                          [name]: { ...result, rps: 1000 / result.mean },
-                        }));
-                        setRunning(null);
-                      }}
-                      samples={SAMPLES}
-                      type="mount"
-                    />
+                    <div className="benchmark">
+                      <Benchmark
+                        ref={refs[name]}
+                        component={() => <Component address={nextAddress()} />}
+                        onComplete={(result) => {
+                          setResults((r) => ({
+                            ...r,
+                            [name]: { ...result, rps: 1000 / result.mean },
+                          }));
+                          setRunning(null);
+                        }}
+                        samples={SAMPLES}
+                        type="mount"
+                      />
+                    </div>
+                    <div className="sample">
+                      <Component address="0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045" />
+                    </div>
                   </div>
                 </td>
               </tr>
@@ -196,9 +222,26 @@ const STYLES = `
     padding: 10px 20px;
   }
   .render-zone {
+    display: flex;
+    gap: 20px;
+  }
+  .render-zone div {
+    position: relative;
     contain: strict;
     width: 64px;
     height: 64px;
     outline: 2px solid #000;
   }
+
+  .render-zone img,
+  .render-zone svg,
+  .render-zone canvas {
+    position: absolute;
+    inset: 0;
+  }
+
+  .react-blockies {
+    width: 64px !important;
+    height: 64px !important;
+  }
 `;