#browser #rendering #optimization
Как работает рендеринг веб-страницы в браузере?
Когда вы открываете веб-сайт, ваш браузер выполняет множество сложных процессов, чтобы превратить HTML, CSS и JavaScript в изображение на экране. Рассмотрим ключевые этапы рендеринга:
1️⃣ Парсинг: создание DOM и CSSOM
Вместе они описывают структуру страницы и стили для каждого элемента.
2️⃣ Создание Render Tree
На основе DOM и CSSOM создается Render Tree, где браузер определяет, какие элементы должны быть отображены и как они выглядят.
3️⃣ Layout
Браузер вычисляет ширину, высоту и координаты каждого элемента, начиная с корневого
4️⃣ Paint
После определения размеров и позиций браузер решает, в каком порядке рисовать элементы (например, с учетом
5️⃣ Compositing
Элементы, которые находятся на разных слоях (например, с
✅ Как оптимизировать рендеринг?
- Аппаратное ускорение (GPU): Используется для сложных графических операций (анимация, фильтры)
- FLIP-анимации: Позволяют избегать перерасчета layout. Элемент сразу помещается в финальную точку, а визуально стартует с помощью transform
- Свойство will-change: Заранее выделяет ресурсы для элементов, которые будут изменяться
Браузер — это сложный механизм, а грамотная разработка позволяет использовать его возможности максимально эффективно.
👍 Платформа
Как работает рендеринг веб-страницы в браузере?
Когда вы открываете веб-сайт, ваш браузер выполняет множество сложных процессов, чтобы превратить HTML, CSS и JavaScript в изображение на экране. Рассмотрим ключевые этапы рендеринга:
Вместе они описывают структуру страницы и стили для каждого элемента.
На основе DOM и CSSOM создается Render Tree, где браузер определяет, какие элементы должны быть отображены и как они выглядят.
Браузер вычисляет ширину, высоту и координаты каждого элемента, начиная с корневого
<html> и постепенно проходя все дочерние узлы. Этот процесс называют компоновкой.После определения размеров и позиций браузер решает, в каком порядке рисовать элементы (например, с учетом
z-index). Для этого создаются Paint Records — инструкции для отрисовки.Элементы, которые находятся на разных слоях (например, с
opacity или transform), объединяются в единую картинку. Здесь браузер использует аппаратное ускорение: часть задач передается на видеокарту (GPU). Это ускоряет работу интерфейсов, особенно для анимаций.- Аппаратное ускорение (GPU): Используется для сложных графических операций (анимация, фильтры)
- FLIP-анимации: Позволяют избегать перерасчета layout. Элемент сразу помещается в финальную точку, а визуально стартует с помощью transform
- Свойство will-change: Заранее выделяет ресурсы для элементов, которые будут изменяться
Зачем это знать?
1. Избегать ненужных перерасчетов layout
2. Писать оптимизированный код для интерфейсов
3. Улучшать пользовательский опыт за счет повышения скорости работы страниц
Браузер — это сложный механизм, а грамотная разработка позволяет использовать его возможности максимально эффективно.
Please open Telegram to view this post
VIEW IN TELEGRAM
👍2🔥1🤝1
#Optimization
🔋 КОД, КОТОРЫЙ НЕ ЕСТ БАТАРЕЙКУ
Сегодня поговорим о том, о чём часто забывают, пока ноут не сядет посреди важного созвона — энергоэффективности кода.
Все знают про оптимизацию скорости, а сколько ватт жрёт ваш код? Один бесконечный цикл на сотне устройств — и привет, счёт за электричество.
7 приёмов для экономии энергии в коде:
1️⃣ Выбирайте правильные алгоритмы
Быстрая сортировка vs пузырьковая — это не только скорость, но и меньше операций → меньше энергии. На больших данных разница колоссальная!
2️⃣ Добавляйте сон в циклы
```python
# Не надо так😐
while True:
check_for_updates()
# Надо так😌
while True:
check_for_updates()
time.sleep(10) # CPU говорит спасибо
```
3️⃣ Ленивая инициализация — ваш друг
Не грузите тяжёлые объекты, пока они реально не понадобятся. Особенно важно для мобилок!
4️⃣ Умный кэш
Кэш экономит вычисления, но может пожирать память. Добавляйте TTL и механизмы очистки.
5️⃣ Асинхронность рулит
Когда задача отложена, CPU может перейти в энергосберегающий режим.
6️⃣ Компиляторы и флаги оптимизации
GCC с флагами -O3 -march=native творит чудеса для C/C++ кода.
7️⃣ UI тоже важен
Тёмные темы на OLED реально экономят заряд. Лишние анимации гоняют GPU и съедают батарейку.
А какие трюки для экономии энергии используете вы? Делитесь в комментах!⬇️
🎙 Новости
📝 База вопросов
Сегодня поговорим о том, о чём часто забывают, пока ноут не сядет посреди важного созвона — энергоэффективности кода.
Все знают про оптимизацию скорости, а сколько ватт жрёт ваш код? Один бесконечный цикл на сотне устройств — и привет, счёт за электричество.
7 приёмов для экономии энергии в коде:
Быстрая сортировка vs пузырьковая — это не только скорость, но и меньше операций → меньше энергии. На больших данных разница колоссальная!
```python
# Не надо так
while True:
check_for_updates()
# Надо так
while True:
check_for_updates()
time.sleep(10) # CPU говорит спасибо
```
Не грузите тяжёлые объекты, пока они реально не понадобятся. Особенно важно для мобилок!
Кэш экономит вычисления, но может пожирать память. Добавляйте TTL и механизмы очистки.
async def periodic_task():
while True:
await do_something()
await asyncio.sleep(10)
Когда задача отложена, CPU может перейти в энергосберегающий режим.
GCC с флагами -O3 -march=native творит чудеса для C/C++ кода.
Тёмные темы на OLED реально экономят заряд. Лишние анимации гоняют GPU и съедают батарейку.
Энергосберегающий код — это не отдельная дисциплина, а стиль мышления. Постоянно спрашивайте себя: "А нужно ли запускать всё это прямо сейчас и именно так?"
А какие трюки для экономии энергии используете вы? Делитесь в комментах!
Please open Telegram to view this post
VIEW IN TELEGRAM
❤1