Проверка ширины и установка ширины внутри цикла forEach

Я не уверен в причине, но, судя по всему, если вы сначала сохраните offsetWidth, неважно, насколько вы используете forEach или map: вот ручка, чтобы проиллюстрировать это поведение.

Вы можете видеть, что я рассчитал три комбинации:

1. forEach с немедленным получением offsetWidth и width установки
2. forEach с сохранением offsetWidth и соответствующего элемента сначала, а затем установить ширину в секунду для forEach
3. map с сохранением offsetWidth и затем установив width элементов в цикле forEach

Вариант 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

ЗАМЕТКИ:

• что заставляет макет/оплату
• статья о проблемах с производительностью макета и разбивке макета

Во второй статье утверждается, что вы всегда должны отделять изменяющийся стиль (например, width установки) и принимать измерения (например, получать offsetWidth), чтобы избежать разметки макета. Кажется, проблема в коде тоже.

в Snippet 1 каждый раз, когда вы выполняете 2 команды:

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

в то время как в Snippet 2 каждый раз, когда вы выполняете только 1 команду:

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

Поэтому я считаю естественным удвоить время исполнения. в зависимости от того, сколько времени потребуется для выполнения следующей команды:

const width = element.offsetWidth;

Для справедливого сравнения двух фрагментов я бы предложил удалить указанную выше команду из цикла и проверить, сколько времени потребуется для выполнения фрагмента 1 в этом случае.

Надеюсь, это поможет.