JSFiddle - React, Tailwind, and code Playground

by musicreader

HTML

<h2>Image Rendering Speed Test</h2>
  <button onclick="runTest()">Run Test</button>
  <div id="results"></div>
  <canvas id="canvas" style="display:none;"></canvas>
  <div id="imageContainer" style="display:none;"></div>

JavaScript

const IMAGE_SRC = "https://www.musictabletstore.com/403-large_default/airturn-duo.jpg"; // Use any image URL

    async function runTest() {
      const results = document.getElementById("results");
      results.innerHTML = "Running test...";

      const img = new Image();
      img.src = IMAGE_SRC;

      await img.decode();

      // Canvas test
      const canvas = document.getElementById("canvas");
      const ctx = canvas.getContext("2d");
      canvas.width = img.width;
      canvas.height = img.height;

      const startCanvas = performance.now();
      ctx.drawImage(img, 0, 0);
      const endCanvas = performance.now();

      // DOM image test
      const container = document.getElementById("imageContainer");
      container.innerHTML = "";
      const startDOM = performance.now();
      const img2 = new Image();
      img2.src = IMAGE_SRC;

      await new Promise((resolve) => {
        img2.onload = () => resolve();
        container.appendChild(img2);
      });
      const endDOM = performance.now();

      results.innerHTML = `
        <p>Canvas drawImage(): ${(endCanvas - startCanvas).toFixed(3)} ms</p>
        <p>DOM Image load + append: ${(endDOM - startDOM).toFixed(3)} ms</p>
      `;
    }