Анализ производительности
презентация к уроку

Слайд 1

Слайд 2

СТРУКТУРА ДАННЫХ Html и CSS все попадая в браузер перед обработкой превращаются в DOM и CSSOM 2

Слайд 3

3 Стадии отрисовки Парсинг Вычисление стилей Расчет макета Визуализация элементов Компоновка https://habr.com/ru/post/320430/

Слайд 4

4 Измерение производительности загрузки страницы — сложная задача, поэтому разработчики Chrome вместе с сообществом работают над прогрессивными веб-метриками ( PWM). Необходимо изучить метрики и научится читать их!!! Анализ загрузки https:// gb.ru/posts/what_is_pwm

Слайд 5

ОТРИСОВКА Важно знать при оптимизации: display:none ; - при отрисовке браузер игнорирует, при изменении значения страницу перерисовывает; v isibility:hidden ; - отрисовывает полностью, прячет области и не перегружает; 5 Любая перерисовка стоит ресурсов!

Слайд 6

Изменение интерфейса и перерисовка 60 fps – 60 кадр/сек (лимит манипуляций, если что то меняем); Эффекты, анимация вызывают перерисовку, вносят изменения и запускает конвейер заново; 6

Слайд 7

Перерисовка С отрисовки Изменения html разметки; Изменение цвета, фона; Изменение размеров – перерасчет геометрии; JS в HEAD – каждый раз перерисовывает всю страницу при выполнении функций. На стадии компоновки Opacity / Transform – не влияют на другой поток, за счет этого частота fps выше 7 Изменения:

Слайд 8

8 Задание 1. Оптимизация отрисовки Цели задания Закрепить приемы оптимизации отрисовки сайта на практике Оба задания являются обязательными. Что нужно сделать: Оптимизируйте анимацию в примере по ссылке: https:// codepen.io/MaxGraph/pen/GRNdQjb Оптимизируйте анимацию в примере по ссылке: https:// codepen.io/MaxGraph/pen/YzpLepB

Слайд 9

9 Задание 2. Определить ключевые метрики и проанализировать рендринг Цели задания Закрепить приемы анализа сайта на практике. Что нужно сделать: Определить ключевые метрики – яндекс , майл , и т.д . Проанализировать свой сверстанный сайт.

Слайд 10

БЛАГОДАРИМ ВАС!