Ответ
- Изменение стилей – например, через
element.styleили добавление/удаление классов. - Изменение содержимого – обновление
innerHTML,textContentили дочерних элементов. - Изменение размеров или позиции – через
width,height,margin,padding,transformи т.д. - Анимации и переходы – CSS-анимации (
@keyframes) или переходы (transition). - Изменение DOM-структуры – добавление, удаление или перемещение элементов.
- Ресайз окна – изменение размеров viewport может вызвать перерисовку.
- События скролла – особенно если обработчик изменяет стили или содержимое.
- Изменение системных стилей – например,
:hover,:focusили медиазапросы.
Пример:
// Вызовет перерисовку
element.style.color = 'red';
// Может вызвать перерисовку из-за изменения layout
element.style.width = '200px'; Ответ 18+ 🔞
Да ты посмотри, какие, блядь, штуки могут заставить браузер дернуться и всё перерисовать! Прям как мартышка на банане, сука, зашевелится. Вот тебе список, держи, чтоб не пиздел потом, что не знал.
- Поменял стили – ну, типа
element.styleили классы туда-сюда перекидываешь. Браузер смотрит: "А, ну понятно, перекрасить надо эту хуйню". - Контент внутрянний подменил –
innerHTMLтам,textContent. Это ж пиздец, всё содержимое поменялось! Ясное дело, перерисовывай всё, блядь. - Габариты или место подвинул – ширину, высоту, отступы, трансформы всякие. Это уже не просто краску сменить, это layout, ёпта, пересчитать надо! Серьёзная движуха.
- Анимации и переходы включил – CSS-ные
@keyframesилиtransition. Браузеру теперь надо, как конь под седлом, каждый кадр высрать, чтобы плавненько было. Овердохуища работы. - Структуру DOM покромсал – элементы добавил, удалил или местами поменял. Это вообще пиздец-война, всё древо перестраивать.
- Окно ресайзнул – пользователь окно растянул, сука. Весь вьюпорт изменился, медиазапросы сработали – всем элементам привет, пересчитывайтесь, твари!
- Скролл событие словил – и в нём, дурак, начал стили менять. Каждый пиксель скролла – новая перерисовка. Ну ты и гений, блядь, производительность ебать.
- Системные стили дернулись – ховер сработал, фокус поменялся, медиазапрос из-за размера экрана щёлкнул. Автоматически, сам по себе, всё поехало.
Ну, смотри, как это выглядит в коде, мудак:
// Вызовет перерисовку (просто цвет)
element.style.color = 'red';
// А вот это может и пересчёт layout вызвать, потому что размер поменялся – серьёзнее, блядь!
element.style.width = '200px';Вот и думай теперь, э бошка, когда что делаешь. Каждая такая операция – это работа для компа, он потеет, бедный. Сделаешь много подряд – он тебе такое кино покажет, тормозное, что волнение ебать.