Benchmark: Object.fromEntries + ar.map vs manual modification of DOMRect

HTML Preparation code:

<div id="el">
  <h2>Lorem ipsum dolor sit amet</h2>
</div>

Script Preparation code:

const RKx = ["x", "width", "left", "right"],
      RKy = ["y", "height", "top", "bottom"],
      RKl = ["height", "width"];
o={x:20,y:121};
e=document.querySelector("h2");
convRectA=(e,o,r,z)=>(
  z = outerWidth / innerWidth,
  r = e.getBoundingClientRect(),
  Object.fromEntries([...RKx.map(k => [k, r[k] * z + o.x]), ...RKy.map(k => [k, r[k] * z + o.y]), ...RKl.map(k => [k, r[k] * z])])
),
convRectB=(e,o)=>{
  let z = outerWidth / innerWidth,
  r = e.getBoundingClientRect(),
  x = r.x * z + o.x,
  y = r.y * z + o.y,
  w = r.width * z,
  h = r.height * z;
  return { 
    bottom: y + h,
    height: h,
    left:   x,
    right:  x + w,
    top:    y,
    width:  w,
    x:      x,
    y:      y }
};

Tests:

Object.fromEntries
convRectA(e, o);
manual modification
convRectB(e, o);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object.fromEntries
manual modification

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser/OS: Chrome 132 on Windows

View result in a separate tab

Test name	Executions per second
Object.fromEntries	212343.7 Ops/sec
manual modification	357360.7 Ops/sec

Related benchmarks:

Object.fromEntries + ar.map vs manual modification of DOMRect (version: 1)

Comparing performance of: Object.fromEntries vs manual modification

Created: one year ago by: Registered User

Jump to the latest result

Object.fromEntries

manual modification

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A