Как максимально быстро добавить нескольким элементам атрибут?

Question

[Alex]

На странице есть массив кнопок. Части из них необходимо добавить атрибут disabled. Какой наиболее производительный способ? Я так понимаю добавлять атрибут по одному каждой кнопке плохое решение, так как это много модификаций DOM, да ещё и каждое такое изменение тригерит анимацию (изменяются стили у заблокированной кнопки)

Answer 1

[Константин Китманов]

Никак. Даже если взять фреймворк, то и там где-то внутри будет тупо цикл.

Во-первых, производительность вас беспокоит зря, основная нагрузка это reflow, а он не должен происходить только потому что кнопку задизейблели (конечно, все зависит от верстки).
Во-вторых, если кнопки лежат в каком-то общем контейнере, а атрибут не является жестким требованием, то можно обойти это классом.

.disable-all-buttons button {
  pointer-events: none; /* отключаем реакцию на клик и тап */
  opacity: 0.6; /* делаем кнопку "бледной" */
}

Кидаем этот класс на общий контейнер и bob's your uncle.

Comments

[hzzzzl]

о, класс на мамкином контейнере это круто, я запомню такое

[Константин Китманов]

hzzzzl, старый трюк, еще времен когда поменять класс трем элементам действительно сажало производительность:)

[Alex]

К сожалению, не в общем.
А по верстке, то вот так:

button {
    background-color: #fff;
    color: #000;

    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

button:disabled {
    background-color: #000;
    color: #fff;
}

[Константин Китманов]

Александр Козак, ну какой-то общий контейнер все равно ж есть, как минимум body:)

Смотрите сами. Забота о производительности это похвально, но сначала проверьте, что это вправду тормозит, а потом оптимизируйте.

[Alex]

Константин Китманов, Оно то да. Ранее анимация изменения состояния кнопки подлагивала. Я провел некоторые оптимизации, чтобы уменьшить количаство операций с ДОМ. Сейчас вроде получше. Но вот изменять состояние кнопкам всё равно приходится по одной. Думал может есть какое-то апи, или подход, при котором браузер перерисовывает страницу за один мах, будто бы я изменил состояние всем кнопкам одновременно

[Константин Китманов]

Александр Козак, will-change: color, background-color; пробовали?

[Alex]

Константин Китманов, Кстати, да, забыл об этом

[Константин Китманов]

Александр Козак, хотел еще предложить менять цвета через custom properties, но они, оказывается, не анимируются.

Answer 2

[hzzzzl]

никак иначе, только в цикле
(да и ладно много модификаций, сколько там таких кнопок, 1000 что ли, не должно влиять на производительность)

document.querySelectorAll('.button-to-disable').forEach(btn => btn.disabled = true)