Benchmark: Overhead of saving and restoring context state 2

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) { const {fillStyle} = $context; $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(0, 0, 1, 1); $context.fillStyle = fillStyle; }
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, 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: 2 years ago)

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

Browser/OS: Yandex Browser 23 on Mac OS X 10.15.7

View result in a separate tab

Not saving and restoring context state

858/s

Saving and restoring context state

798/s

View exact numbers

Test name	Executions per second
✓ Not saving and restoring context state	858 Ops/sec
Saving and restoring context state	798 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 benchmark and explain what is being tested.

**Overview**

The benchmark measures the overhead of saving and restoring context state in JavaScript when drawing on a canvas element using the 2D drawing context API.

**Options compared**

There are two options compared:

1. **Not saving and restoring context state**: This option draws directly to the canvas without saving and restoring the context state.
2. **Saving and restoring context state**: This option saves the current context state, sets a new fill style, draws on the canvas, and then restores the original context state.

**Pros and Cons**

**Not Saving and Restoring Context State**

Pros:

* Faster execution time since no overhead is introduced by saving and restoring the context state.
* Less code to execute, which can result in better performance due to reduced CPU usage.

Cons:

* Potential for unexpected behavior or loss of data if the fill style changes unexpectedly between draws.

**Saving and Restoring Context State**

Pros:

* Ensures that the draw operations are correctly scoped and reproducible.
* Allows for better control over the drawing process, such as switching between different fill styles.

Cons:

* Introduces additional overhead due to saving and restoring the context state, which can slow down the execution time.
* Requires more code to execute, which can result in increased CPU usage.

**Library/ Library Purpose**

In this benchmark, the `YaBrowser` library is used. It's likely a custom or third-party library for rendering web pages. The specific purpose of the library is not explicitly stated, but it provides additional functionality on top of the standard WebKit engine (e.g., Safari).

**Special JS Feature/Syntax**

This benchmark does not use any special JavaScript features or syntax beyond what's required for drawing on a canvas element using the 2D drawing context API.

**Alternative approaches**

Other approaches to measure the overhead of saving and restoring context state could include:

1. Using a different rendering library, such as Babylon.js or Three.js.
2. Creating a custom rendering engine from scratch.
3. Measuring the overhead of saving and restoring context state using a different JavaScript implementation, such as V8 (used by Google Chrome).

Keep in mind that these alternatives may require significant changes to the benchmarking setup and code.

Overhead of saving and restoring context state 2 (version: 0) Benchmark.js

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

Created: 2 years ago by: Guest

Go 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):

Overhead of saving and restoring context state 2 (version: 0) Benchmark.js

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

Created: 2 years ago by: Guest

Go 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):

Related benchmarks

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