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 llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested.

**Benchmark Name:** "cache vs live"

**Description:** This benchmark compares the performance of two approaches to drawing on a canvas: using an image cache (cached) versus redrawing from scratch each time (live).

**Script Preparation Code:** The script prepares a 400x400 canvas element and gets its 2D context. It then creates a cached image data object by capturing the entire canvas as an image, which can be reused.

**Html Preparation Code:** A simple HTML snippet is provided to create a canvas element with an ID of "canvas" and a size of 400x400 pixels.

**Test Cases:**

1. **cache**: This test case uses the cached image data object created in the script preparation code. It simply puts the cached image data back onto the canvas using `ctx.putImageData(cache, 0, 0)`. In essence, it's reusing a pre-created image.
2. **live**: This test case redraws the entire canvas from scratch each time. It starts with a new path, sets the fill style to black, draws an arc at coordinates (12, 12), and fills it.

**Latest Benchmark Results:** The results show the execution speed for each test case on a desktop Windows machine running Chrome 73:

* **cache**: 11,698 executions per second
* **live**: 161,243 executions per second

The results indicate that redrawing from scratch (live) is significantly faster than reusing a cached image data object (cache).

**Library Used:** None mentioned in the provided code snippet.

**Special JS Features or Syntax:**

* The code uses `ctx.getImageData()` to capture an image of the canvas, which creates a cached image data object.
* It also uses `ctx.putImageData()` to put the cached image back onto the canvas.
* `Math.PI * 2` is used as a mathematical constant to represent the full circle.

**Alternatives:**

If you need to draw complex shapes or graphics on a canvas, redrawing from scratch each time can be faster than reusing a cached image data object. However, if you're drawing simple shapes or static content, reusing a cached image data object can save computational resources and improve performance.

Other considerations:

* The size of the canvas: Larger canvases may require more memory to store cached image data objects.
* Complexity of the graphics: Simple shapes might be faster to draw from scratch than complex ones that benefit from caching.
* Frequency of updates: If the content on the canvas changes frequently, redrawing from scratch each time may be necessary.

Overall, this benchmark highlights the importance of considering performance trade-offs when designing graphical applications, especially those using HTML canvases.

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 llama3.1:latest, generated one year ago):