Benchmark: Overhead of saving and restoring context state 2.0

HTML Preparation code:

<canvas id="canvas" width="800" height="300"></canvas>

Script Preparation code:

$canvas = document.getElementById('canvas');
$context = $canvas.getContext('2d');
$context.clearRect(0, 0, 800, 300);

$iterations = 500;

Tests:

Saving and restoring context state
for (let i=0; i<$iterations; ++i) { $context.save(); $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(0, 0, 100, 100); $context.fillRect(50, 20, 50, 50); $context.arc(0, 0, 30, 0, 2 * Math.PI); $context.restore(); }
No Restore
for (let i=0; i<$iterations; ++i) { $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(0, 0, 100, 100); $context.fillRect(50, 20, 50, 50); $context.arc(0, 0, 30, 0, 2 * Math.PI); }
Simple Restore
for (let i=0; i<$iterations; ++i) { $context.save(); $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(0, 0, 1, 1); $context.restore(); }
Simple No restore
for (let i=0; i<$iterations; ++i) { $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(0, 0, 1, 1); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Saving and restoring context state
No Restore
Simple Restore
Simple No restore

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36

Browser/OS: Chrome 123 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Saving and restoring context state	1628.9 Ops/sec
No Restore	1908.1 Ops/sec
Simple Restore	2152.6 Ops/sec
Simple No restore	3998.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided benchmark tests the overhead of saving and restoring context state in the 2D drawing context of HTML5 canvases. The test cases aim to measure how much work is done when saving, restoring, or not restoring the context state during a series of drawings.

**Options compared:**

There are four test cases:

1. **Saving and restoring context state**: This test case saves the current transformation (state) before each drawing operation and restores it afterwards.
2. **No Restore**: This test case draws directly without saving and restoring the context state.
3. **Simple Restore**: This test case only saves the context state once at the beginning of the loop, but then immediately restores it after each drawing operation.
4. **Simple No restore**: Similar to Simple Restore, but with a slight twist: it saves the context state once at the beginning and doesn't restore it.

**Pros and Cons of each approach:**

1. **Saving and restoring context state**:
	* Pros: This approach is more accurate as it simulates real-world usage of canvas contexts.
	* Cons: It introduces additional overhead due to saving and restoring the state, which can impact performance.
2. **No Restore**:
	* Pros: This approach minimizes overhead by not introducing any unnecessary state saves.
	* Cons: It may not accurately represent real-world usage, as it doesn't account for context state changes.
3. **Simple Restore** and **Simple No restore**:
	* Both approaches balance between accuracy and overhead. Simple Restore saves the state once, while Simple No restore does so twice (before and after drawing).

**Library usage:**

The benchmark uses the HTML5 canvas element, which is a built-in feature of modern browsers. The `Context` object is used to draw on the canvas.

**Special JS feature or syntax:**

None mentioned in this specific benchmark. However, it's worth noting that MeasureThat.net often tests features like async/await, Web Workers, and Web Storage, among others.

**Other alternatives:**

If you're interested in exploring alternative approaches for measuring performance in JavaScript microbenchmarks, consider the following:

* Using a different rendering engine or browser.
* Focusing on specific aspects of canvas contexts, such as image loading or vector graphics.
* Experimenting with other drawing libraries like SVG or Raphael.js.
* Investigating performance differences between modern and older browsers.

Keep in mind that these alternatives might require adjustments to your benchmark script and hardware configuration.

Related benchmarks:

Overhead of saving and restoring context state 2.0 (version: 0)

Comparing performance of: Saving and restoring context state vs No Restore vs Simple Restore vs Simple No restore

Created: 3 years ago by: Guest

Jump to the latest result

Saving and restoring context state

No Restore

Simple Restore

Simple No restore

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):