在 forEach 循环性能中检查宽度和设置宽度

Question

下面有两段代码

片段#1

const doubleWidth = (element) => {
  const width = element.offsetWidth;
  element.style.width = `${width * 2}px`;
};
button.addEventListener('click', (event) => {
  boxes.forEach(doubleWidth);
});

片段#2

button.addEventListener('click', (event) => {
  var widths = boxes.map(item => item.offsetWidth);
  boxes.forEach((element, index) => {
         element.style.width = `${widths[index] * 2}px`;
  });
});

Snippet #1 有很多 48 毫秒，而 sn-p #2 只有 18.4 毫秒。为什么会有这种行为？

毕竟，我还在做计算和设置（强制回流）两个操作。

这是完整的代码 - https://codepen.io/kushalmahajan/pen/mjXVqp?editors=0010

更新 - 所以，让我再解释一下

在片段 #1 中，我每次都会看到一个模式，例如计算、重置、计算、重置……等等

在片段 #2 中。事实并非如此。

请以渲染管道为基础回答

Answer 1

在片段 1 中 每次执行 2 个命令时：

const width = element.offsetWidth;
element.style.width = `${width * 2}px`;

在片段 2 中 每次只执行 1 个命令：

element.style.width = `${widths[index] * 2}px`;

因此，我认为执行时间增加一倍以上是很自然的。取决于执行以下命令需要多少时间：

const width = element.offsetWidth;

为了在 2 个 sn-ps 之间进行公平比较，我建议从循环中删除上述命令，并检查在这种情况下执行 sn-p 1 需要多长时间。

希望对你有帮助。

Answer 2

我不确定原因，但显然如果您先存储offsetWidth，那么无论您使用forEach 还是map，性能方面都没有关系：here's a pen to illustrate this behavior。

你可以看到我计时了三个组合：

1. forEach 立即获得offsetWidth 并设置width
2. forEach 首先存储offsetWidth 和相应的元素，然后在第二个forEach 中设置宽度
3. map 存储 offsetWidth 然后在 forEach 循环中的元素上设置 width

选项 2. 和 3. 在性能方面基本相同。由此看来，我想说获取offsetWidth 和设置width 的组合是性能瓶颈。真的不能告诉你更多，对不起！

---

window.onload = () => {
    const boxes = Array.from(document.querySelectorAll('.box'));

    document.getElementById('double-sizes-forEach')
    .addEventListener('click', (event) => {
        console.time('Double Sizes ForEach');

        boxes.forEach((element, index) => {
        const width = element.offsetWidth;
        element.style.width = `${width * 2}px`;
        });

        console.timeEnd('Double Sizes ForEach');
    });

    document.getElementById('double-sizes-forEach-2')
    .addEventListener('click', (event) => {
        console.time('Double Sizes ForEach 2');

        let a = [];
        boxes.forEach((element, index) => {
        a.push([element, element.offsetWidth]);
        });
        a.forEach(([e, w]) => {
        e.style.width = `${w * 2}px`; 
        });

        console.timeEnd('Double Sizes ForEach 2');
    });

    document.getElementById('double-sizes-map')
    .addEventListener('click', (event) => {
        console.time('Double Sizes Map');

        var widths = boxes.map(item => item.offsetWidth);
        boxes.forEach((element, index) => {
            element.style.width = `${widths[index] * 2}px`;
        });

        console.timeEnd('Double Sizes Map');
    });
};

---

输出：

Double Sizes ForEach: 12.341064453125ms
Double Sizes ForEach 2: 0.539794921875ms
Double Sizes Map: 0.590087890625ms

---

注意事项：

• what forces layout/reflow
• article on layout performance issues and layout thrashing

第二篇文章认为您应该始终将更改样式（例如设置width）和进行测量（例如获取offsetWidth）分开以避免布局颠簸。似乎这也是您代码中的问题。