Run results for: Object.fromEntries + ar.map vs manual modification of DOMRect

Run details:

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: Chrome 132

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

manual modification

357K/s

Object.fromEntries

212K/s

View exact numbers

Test name	Executions per second
✓ manual modification	357,361 Ops/sec
Object.fromEntries	212,344 Ops/sec

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);