Benchmark: Overhead of saving and restoring context state 3.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:

Not saving and restoring context state
for (let i=0; i<$iterations; ++i) { $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.translate(30, 30); $context.fillRect(0, 0, 100, 100); $context.translate(-30, -30); }
Saving and restoring context state
for (let i=0; i<$iterations; ++i) { $context.save(); $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.translate(30, 30); $context.fillRect(0, 0, 1, 1); $context.restore(); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Not saving and restoring context state
Saving and restoring context state

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.4 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 18 on iOS 18.4.1

View result in a separate tab

Test name	Executions per second
Not saving and restoring context state	5645.0 Ops/sec
Saving and restoring context state	4596.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark.

**Benchmark Purpose**
The primary goal of this benchmark is to measure the overhead of saving and restoring context state in the 2D drawing context of a JavaScript canvas element. The test compares two approaches: one where the context state is not saved, and another where it is saved before executing a series of drawing operations and then restored.

**Script Preparation Code**
The script preparation code initializes a `canvas` element with an ID of "canvas" and gets a reference to its 2D drawing context (`$context`). It then clears the canvas by setting its background color to transparent. The number of iterations for the test is set to `$iterations = 500;`.

**Html Preparation Code**
The HTML preparation code defines a `canvas` element with an ID of "canvas" and dimensions of 800x300.

**Individual Test Cases**

### Not Saving and Restoring Context State

The first test case, labeled as "Not saving and restoring context state", executes the following drawing operations:

```javascript
for (let i=0; i<$iterations; ++i) {
  $context.fillStyle = 'rgba(100,150,200,0.9)';
  $context.translate(30, 30);
  $context.fillRect(0, 0, 100, 100);
  $context.translate(-30, -30);
}
```

This test does not save and restore the context state, which means that any changes made to the drawing context (e.g., changing the fill style or translation) will be lost after each iteration.

**Pros and Cons:**

* **Pros:** This approach may provide a more accurate measurement of the overhead of saving and restoring context state since it does not introduce additional overhead due to saving and restoring.
* **Cons:** Since the context state is not saved, any changes made to the drawing context will be lost after each iteration, which may affect the accuracy of the benchmark.

### Saving and Restoring Context State

The second test case, labeled as "Saving and restoring context state", executes the following drawing operations:

```javascript
for (let i=0; i<$iterations; ++i) {
  $context.save();
  $context.fillStyle = 'rgba(100,150,200,0.9)';
  $context.translate(30, 30);
  $context.fillRect(0, 0, 1, 1);
  $context.restore();
}
```

This test saves the current context state before executing each iteration and then restores it after execution. This allows any changes made to the drawing context (e.g., changing the fill style or translation) to be preserved across iterations.

**Pros and Cons:**

* **Pros:** By saving and restoring the context state, this approach ensures that any changes made to the drawing context are preserved across iterations, which may provide a more accurate measurement of the overhead.
* **Cons:** This approach introduces additional overhead due to saving and restoring the context state, which can affect the accuracy of the benchmark.

**Library:**
The `canvas` element and its 2D drawing context (`$context`) rely on the HTML5 Canvas API. The library used here is not a specific JavaScript library but rather an API built into modern web browsers.

**Special JS Features/Syntax:**
This benchmark does not use any special JavaScript features or syntax, such as async/await, Promises, or modern ES6+ features.

**Alternatives:**
If you want to create a similar benchmark for measuring the overhead of other operations in JavaScript, consider using alternatives like:

* Measuring the performance of a specific function or method
* Comparing the execution times of different algorithms or data structures
* Creating a benchmark that measures the overhead of memory allocation, garbage collection, or other low-level operations

Related benchmarks:

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

Comparing performance of: Not saving and restoring context state vs Saving and restoring context state

Created: 3 years ago by: Guest

Jump to the latest result

Not saving and restoring context state

Saving and restoring context state

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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