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

Test name	Executions per second
Not saving and restoring context state	857.6 Ops/sec
Saving and restoring context state	798.2 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.

Related benchmarks:

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

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

Created: 2 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):