Что такое Reflow и Repaint — и почему они тормозят сайт

Когда ты меняешь стили через JavaScript или CSS, браузер перерисовывает страницу. Но не все изменения равны — есть два уровня нагрузки:

Reflow (Layout)
Что происходит:
Браузер пересчитывает геометрию элементов — ширину, высоту, положение.
Это дорогая операция, особенно на больших страницах.

Когда возникает:
- width, height, padding, margin, top, left, font-size
- добавление/удаление DOM-элементов
- изменение контента (например, текст внутри блока)

Пример:

element.style.height = '300px'; // вызывает reflow

Repaint
Что происходит:
Только перекраска элементов без изменения их размеров/позиции.

Когда возникает:
- background-color
-color
- box-shadow
- visibility

Пример:

element.style.backgroundColor = 'red'; // repaint, без reflow

Оптимизация
Как избежать лишней нагрузки:
- Используй transform, opacity — они не вызывают reflow или repaint, обрабатываются GPU
- Группируй DOM-изменения в requestAnimationFrame или за 1 кадр
- Не читай свойства (offsetHeight, getBoundingClientRect и т.д.) сразу после изменения стилей — это может форсировать reflow

Плохо:

el.style.width = '200px';
console.log(el.offsetHeight); // форсирует reflow

Хорошо:

el.getBoundingClientRect(); // читаем сначала
el.style.width = '200px';   // потом пишем

Вывод
Reflow — дорого. Repaint — дешевле, но тоже не бесплатен.
Лучше использовать transform, opacity, а DOM трогать по минимуму.

#полезности

Тег <progress>

Читать 👨‍💻

#html | #теория

Плагины и решения для создания звездного рейтинга

1. Просто верстка
2. Вариант Фрилансера по жизни
3. Плагин Rate Yo
4. Решение с codepen

#полезности

Макет для тренировки (henderson)

Перейти к макету 🧑‍💻

#практика | #макет

Функция каррирования

Реализуй функцию каррирования, которая позволяет передавать аргументы по одному.

function curry(fn) {
  // Твой код здесь
}

function add(a, b, c) {
  return a + b + c;
}

const curriedAdd = curry(add);

console.log(curriedAdd(1)(2)(3)); // 6

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Плагины и решения для создания звездного рейтинга
2. Тег <progress>
3. Блюр текста при скролле

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. HTML-верстальщик
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Продуктовый дизайнер

#лучшеезанеделю

Тег <time>

HTML тег <time> представляет временную метку в документе HTML. Он используется для указания даты, времени или их комбинации.

Пример использования тега <time>:

<time datetime="2022-01-01">1 января 2022</time>

В данном примере мы указываем, что наша временная метка соответствует 1 января 2022 года. Атрибут datetime используется для указания конкретной даты и времени в формате ГГГГ-ММ-ДД.
Однако, тег <time> не ограничивается только датами. Он также может быть использован для указания времени:

<time datetime="12:30">12:30 PM</time>

В этом случае мы указываем, что временная метка соответствует 12:30 PM.

Тег <time> также поддерживает комбинированные значения, включающие и дату, и время:

<time datetime="2022-01-01T12:30">1 января 2022 года, 12:30 PM</time>

Этот пример указывает, что временная метка соответствует 1 января 2022 года, 12:30 PM.

Тег <time> особенно полезен для поисковых систем и адаптивного дизайна. Поисковые системы могут использовать информацию из тега <time> для индексации дат и времени, а адаптивный дизайн может автоматически адаптировать формат и отображение временных меток в зависимости от устройства пользователя.
Тег <time> является одним из многих полезных инструментов, предоставляемых HTML для более точного и информативного описания контента.

#html | #теория

Initial-letter. Буквица в css

Читать 👨‍💻

#css | #теория

CSS св-во contain

Читать 👨‍💻

#полезности

Макет для тренировки (sattva)

Перейти к макету 🧑‍💻

#практика | #макет

Функция мемоизации

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

function memoize(fn) {
  // Твой код здесь
}

const slowFunction = (n) => {
  console.log("Вычисляю...");
  return n * n;
};

const memoizedFunction = memoize(slowFunction);

console.log(memoizedFunction(5)); // "Вычисляю..." 25
console.log(memoizedFunction(5)); // 25 (без вычислений)

#домашка

Подборка лучших постов за прошлую неделю

Лучшие статьи @free_html_lessons:
1. Grid with corner item
2. CSS св-во contain
3. Тег time

Лучшие фронтенд вакансии @job_webdev:
1. HTML-верстальщик
2. Frontend разработчик
3. HTML-верстальщик

Лучшие дизайн вакансии @job_webdesign:
1. Web-дизайнер
2. Продуктовый дизайнер
3. UX/UI дизайнер

#лучшеезанеделю

Валидаторы

Читать 👨‍💻

#полезности

Свойство -webkit-line-clamp

Читать 👨‍💻

#css | #теория

Цветные шрифты
На Google Fonts выходит партия цветных шрифтов.

Среди них иконочные по типу эмоджи (https://fonts.google.com/noto/specimen/Noto+Color+Emoji), несколько поддерживающих латиницу (https://fonts.google.com/specimen/Bungee+Spice
https://fonts.google.com/specimen/Nabla ) и ряд из них - арабские алфавиты.

COLRv1 являются векторными, что, конечно, позволяет масштабировать без пикселизации изображения.

Среди особенностей: возможности изменения цветовых схем шрифта, добавление градиента и изменение ширины / высоты / толщины букв.

Источник: https://material.io/blog/color-fonts-are-here

#полезности

Timeline на jquery

Смотреть на codepen 👨‍💻

#полезности