Benchmark: cache vs live - MeasureThat.net

HTML Preparation code:

<canvas id="canvas" width="400" height="400"></canvas>

Script Preparation code:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.fillStyle = '#000';
ctx.arc(6, 6, 6, 0, Math.PI * 2, true);
ctx.fill();

var cache = ctx.getImageData(0, 0, canvas.width, canvas.height);

Tests:

cache
ctx.putImageData(cache, 0, 0);
live
ctx.beginPath(); ctx.fillStyle = '#000'; ctx.arc(12, 12, 6, 0, Math.PI * 2, true); ctx.fill();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cache
live

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
cache	4249.6 Ops/sec
live	973038.1 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):

LLMs can make mistakes. Check important info.

This benchmark tests the performance difference between using cached image data and redrawing an image live.

Here's a breakdown:

* **Options Compared:**
    * **`cache`:** This test uses `ctx.putImageData(cache, 0, 0)` to draw the pre-cached image data onto the canvas. It leverages previously rendered data stored in the `cache` variable. 
    * **`live`:** This test redraws the image from scratch every time using `ctx.beginPath()`,  `ctx.fillStyle = '#000'`, `ctx.arc()`, and `ctx.fill()`.

* **Pros/Cons:**
    * **`cache` (cached data):**
        * **Pro:** Faster execution because the image data is already available, avoiding repeated rendering operations.
        * **Con:** Requires an initial setup step to cache the image data before it can be used for subsequent drawing.
    * **`live` (redrawing):**
        * **Pro:** Potentially more flexible if you need to modify the image dynamically between each execution. 
        * **Con:**  Slower because each rendering cycle requires calculating and applying new pixels.

* **Alternatives:**
    * **Image Sprites:** For complex images or animations, consider using image sprites to optimize loading and drawing by combining multiple images into a single texture.
    * **Canvas Optimization Techniques:**  Explore techniques like tile-based rendering or offscreen canvases for large, intricate drawings to improve performance further.

Let me know if you'd like more details on any specific aspect!

Related benchmarks:

cache vs live (version: 0)

Comparing performance of: cache vs live

Created: 8 years ago by: Guest

Jump to the latest result

cache

live

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated one year ago):