window.onload = function () {
        var spans = document.getElementsByTagName("span");

        // 第一种代码
        // for (let i = 0; i < spans.length; i++) {
        //   const ele = spans[i];
        //   ele.style.width = ele.offsetWidth + "px";
        // }

        // 第二种代码
        var arr = [];
        for (let i = 0; i < spans.length; i++) {
          const ele = spans[i];
          arr.push(ele.offsetWidth + "px");
        }

        for (let i = 0; i < arr.length; i++) {
          spans[i].style.width = arr[i];
        }
};

老师，我在一个页面上写了将近100个span
用第一种代码，performance显示每个Recalcute style 大约0.1ms，每个layout大约0.2ms，共花了38ms左右。
然后我又用第二种代码，Recalcute style共0.53ms, layout共1.5ms，共花了2ms左右，明显比第一种代码性能好。
问：我以为多个Recalcute style或layout 和 单个是累加关系，但结果显示明显多个一起Recalcute style或layout比多次单个的要好，这部分是由于浏览器做了优化吗，能大概说下是咋优化的吗？