Однако я не могу обернуть голову вокруг Element.setAttribute. Является ли
триггер переформатировать / перекрасить в Chrome?
setAttribute не имеет прямого отношения к перекраске / перекомпоновке. Это зависит от того, какой атрибут вы устанавливаете и какой элемент вы его устанавливаете. Если вы поменяете value флажка, перерисовка или перекомпоновка не произойдет, но если вы поменяете value для <input type="button">, тогда произойдет перекраска и перекомпоновка.
Какой самый эффективный способ обновить атрибуты нескольких элементов
в дом дерево?
Трудно ответить на вопрос «Самый эффективный», потому что каждый браузер можно оптимизировать для выполнения задач с разной скоростью. Но, вообще говоря, вы можете следовать этим рекомендациям:
Никогда не обновляйте DOM из цикла, поскольку каждая итерация
Цикл может вызвать перекрашивание / перекомпоновку.
- Вместо этого вы можете создать строку HTML и, когда цикл равен
завершите, введите строку один раз и получите все обновления.
- Вы также можете создавать и работать с элементами, которые еще не добавлены в дерево DOM и существуют только в памяти. Затем вы можете поместить эти элементы в один контейнер, который сам по себе еще не является частью DOM. Наконец, вы можете добавить контейнер в DOM и выполнить операцию перерисовки / перекомпоновки всего один раз.
- Если вы выполняете много манипуляций с CSS и испытываете проблемы с производительностью, вы можете захотеть взглянуть на свойство will-change CSS , которое может повысить производительность.
Существует множество доступных ресурсов, чтобы узнать, как снизить производительность: