Benchmark: domrect vs object

HTML Preparation code:

<div id='test'></div>

Script Preparation code:

 function createCanvasRect(
  x,
  y,
  width,
  height
) {
  const top = height >= 0 ? y : y + height;
  const right = width >= 0 ? x + width : x;
  const bottom = height >= 0 ? y + height : y;
  const left = width >= 0 ? x : x + width;

  return {
    x,
    y,
    width,
    height,
    top,
    right,
    bottom,
    left,
  };
}

Tests:

domrect
new DOMRect(1,2,3,4)
object
createCanvasRect(1,2,3,4)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
domrect
object

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Windows

View result in a separate tab

Test name	Executions per second
domrect	5055498.5 Ops/sec
object	83717824.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmark test case, specifically comparing the performance of two approaches to create a rectangular bounding box: `DOMRect` and an object literal (`createCanvasRect`).

**Tested Options**

Two options are being compared:

1. **DOMRect**: A built-in API in modern web browsers for creating rectangular regions on the Document Object Model (DOM). It provides a more concise way of defining rectangles than the traditional method using `top`, `right`, `bottom`, and `left` properties.
2. **Object Literal (`createCanvasRect`)**: A custom function that takes four arguments (`x`, `y`, `width`, and `height`) to create an object with the same properties as a DOMRect.

**Pros and Cons**

**DOMRect:**

Pros:

* More concise and readable
* Part of the standard DOM API, making it widely supported
* Faster execution (as evident from the benchmark results)

Cons:

* Less control over the creation process
* May not work in older browsers that don't support DOMRect

**Object Literal (`createCanvasRect`):**

Pros:

* More control over the creation process
* Works in older browsers that don't support DOMRect
* Can be useful for complex rectangle calculations or transformations

Cons:

* Less concise and more verbose
* Slower execution (as evident from the benchmark results)

**Library Usage**

The `DOMRect` API is a part of the standard web APIs, but some older browsers may not support it. The `createCanvasRect` function, on the other hand, is a custom implementation that provides a similar functionality.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes used in this benchmark. Both test cases rely on basic arithmetic operations and object literal creation.

**Other Alternatives**

If you need more control over rectangle calculations or want to support older browsers, you could consider using:

* **Canvas API**: A 2D graphics API that allows you to create and manipulate rectangles using canvas elements.
* **Rect API**: A proposal for a new rectangular region type in the DOM API, which would provide a more concise way of defining rectangles than `DOMRect`.
* **Third-party libraries**: There are several third-party libraries available that provide rectangle-related functionality, such as jQuery's `.offset()` method or modernizr's `isDOMRect` function.

Keep in mind that the performance differences between these alternatives may vary depending on the specific use case and browser support.

Related benchmarks:

domrect vs object (version: 0)

Comparing performance of: domrect vs object

Created: one year ago by: Guest

Jump to the latest result

domrect

object

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):