Анализ производительности
презентация к уроку
Презентация на тему "Анализ производительности" по курсу "Оптимизация веб приложений"
Скачать:
Вложение | Размер |
---|---|
![]() | 2.63 МБ |
Предварительный просмотр:
Подписи к слайдам:
СТРУКТУРА ДАННЫХ Html и CSS все попадая в браузер перед обработкой превращаются в DOM и CSSOM 2
3 Стадии отрисовки Парсинг Вычисление стилей Расчет макета Визуализация элементов Компоновка https://habr.com/ru/post/320430/
4 Измерение производительности загрузки страницы — сложная задача, поэтому разработчики Chrome вместе с сообществом работают над прогрессивными веб-метриками ( PWM). Необходимо изучить метрики и научится читать их!!! Анализ загрузки https:// gb.ru/posts/what_is_pwm
ОТРИСОВКА Важно знать при оптимизации: display:none ; - при отрисовке браузер игнорирует, при изменении значения страницу перерисовывает; v isibility:hidden ; - отрисовывает полностью, прячет области и не перегружает; 5 Любая перерисовка стоит ресурсов!
Изменение интерфейса и перерисовка 60 fps – 60 кадр/сек (лимит манипуляций, если что то меняем); Эффекты, анимация вызывают перерисовку, вносят изменения и запускает конвейер заново; 6
Перерисовка С отрисовки Изменения html разметки; Изменение цвета, фона; Изменение размеров – перерасчет геометрии; JS в HEAD – каждый раз перерисовывает всю страницу при выполнении функций. На стадии компоновки Opacity / Transform – не влияют на другой поток, за счет этого частота fps выше 7 Изменения:
8 Задание 1. Оптимизация отрисовки Цели задания Закрепить приемы оптимизации отрисовки сайта на практике Оба задания являются обязательными. Что нужно сделать: Оптимизируйте анимацию в примере по ссылке: https:// codepen.io/MaxGraph/pen/GRNdQjb Оптимизируйте анимацию в примере по ссылке: https:// codepen.io/MaxGraph/pen/YzpLepB
9 Задание 2. Определить ключевые метрики и проанализировать рендринг Цели задания Закрепить приемы анализа сайта на практике. Что нужно сделать: Определить ключевые метрики – яндекс , майл , и т.д . Проанализировать свой сверстанный сайт.
БЛАГОДАРИМ ВАС!
По теме: методические разработки, презентации и конспекты
![](/sites/default/files/pictures/2018/01/27/picture-78820-1517080113.jpg)
Методическая разработка бинарного урока по спецдисциплинам: «Экономика организации», «Бухгалтерский учёт» на тему: «Кадры предприятия. Производительность. Учёт труда и заработной платы».
Содержит материал по подготовке и проведению бинарного урока по спецдисциплинам: «Экономика организации», «Бухгалтерский учёт» на тему: «Кадры предприятия. Производительность. Учёт труда и заработной ...
![](/sites/default/files/pictures/2015/01/12/picture-562655-1421066111.jpg)
Презентация на тему «Трудовые ресурсы, производительность труда»
Эта презентация предназначена для использования на уроке "Трудовые ресурсы, производительность труда". Представленная в презентации информация в наглядной и доступной форме способствует изучению ...
![](/sites/default/files/pictures/2015/06/19/picture-644470-1434738643.jpg)
Методическое пособие к комбинированным занятиям по дисциплине Экономика организации по теме "Кадры и производительность труда".
Пособие представляет собой структурированный материал состоящий из теоретического и практического блока, который позволит студентам эффективно изучить тему "Кадры и производительность труда"....
![](/sites/default/files/pictures/2019/09/05/picture-654420-1567667995.jpg)
План открытого урока по дисциплине: Основы экономики на тему "Производительность труда. Показатели уровня производительности"
Развёрнутый план урока-практикума по Основам экономикина тему "Производительность труда. Показатели уровня производительности"...
![](/sites/default/files/pictures/2019/09/05/picture-654420-1567667995.jpg)
План открытого урока по дисциплине: Основы экономики -Тема урока: «Производительность труда. Факторы производительности труда»
Тип урока: комбинированныйВид урока: урок-практикум комплексного применения знаний в рамках темы: «Производительность труда»Цели урока:Дидактические:· Повтори...
![](/sites/default/files/pictures/2016/09/19/picture-815818-1474237287.jpg)
ИЗУЧЕНИЕ И ИССЛЕДОВАНИЕ ВОЗМОЖНОСТИ ПОВЫШЕНИЯ ПРОИЗВОДИТЕЛЬНОСТИ ПРОЦЕССА СВАРКИ
Представлена презентация об одном из направлений деятельности кружка «Сварщик» в процессе обучения по специальности 22.02.06 «Сварочное производство». Данное направление работы кружка выбрано с ...
![](/sites/default/files/pictures/2016/01/15/picture-490092-1452883722.jpg)
"Создание графиков производительности гостиницы"
Методическая разработка лабораторной работы на 4 часа на тему "Создание графиков производительности гостиницы" для студентов специальности 43.02.11"Гостиничный сервис" (углубленная подготов...