Это видео недоступно.
Сожалеем об этом.
Performance - ШРИ 2024
HTML-код
- Опубликовано: 7 июл 2024
- "Спикеры: Константин Петряев руководитель группы, Александр Нефедов ведущий разработчик интерфейсов
Обсудим, что такое производительность веб-страниц и от чего она зависит. Также поговорим про основные показатели и инструменты для их мониторинга, рассмотрим основные подходы к оптимизации скорости загрузки веб-приложений.
Регистрация на Открытый Лекторий: yandex.ru/yaintern/schools/op..."
Добрый вечер.
Субъективный отзыв:
I часть
1) Все, что касается объяснения способов улучшения производительности - полезно, спасибо.
2) Все, что касается кода с Башнями - тихий ужас. Непонятно ничего. При этом это непонятно начинается очень резко.
II часть: Честно говоря, вообще не понял практическую пользу полученной информации. Я узнал, что есть разные инструменты. Ну ок.
PS слишком чутко настроен микрофон - слышны все причмокивания, сглатывания и проч. Пофиксите пож.
Спасибо!
Задачу с башнями не обязательно понимать чтобы понять материал, но если хотеть то можно. Эта задача нужна чтобы сгенерировать многострочный текст(массив строк), который нужно отрендерить. Для того чтобы сделать измерения в devtools performance.
Первый вариант это самый не оптимизированный. который каждую строку писал в геттер innerHTML и из-за этого получали очень большое проседание производительности это было видно по времени потрацченное на операцию Layout. геттер innerText выполняет проверку текста на предмет xss и делает еще проверки. также каждый раз выполняется операция reflow и изменения в DOM.
Второй вариант всю строку и за один ра записали innerText стало быстрее, вывод вместо тысячи итераций лучше сделать одну операцию
Третий вариант записали всю строку в innerHTML который не делает кучи проверок как innerTExt и потому работает быстрее
Четвертый вариант используем результаты предварительно прочитанных для нашего кейса, т.е. экономим на вычислениях
Пятый вариант не показываем весь текст, а только часть используем ленивую загрузку, меньше показываем, меньше рендерим.
Надеюсь объяснил
Задачу с башнями не обязательно понимать чтобы понять материал, но если хотеть, то можно. Эта задача нужна чтобы сгенерировать многострочный текст(массив строк), который нужно отрендерить. Измерения проводили в devtools performance и memory.
Пишем саймый не оптимизированный вариант кода, который будем последовательно оптимизировать. Изначально каждую строку писали в геттер innerHTML и из-за этого получали очень большое проседание производительности это было видно по времени потрацченное на операцию которая в devtools обозначена как Layout. геттер innerText выполняет проверку текста на предмет xss и делает еще проверки. также каждый раз выполняется операция reflow и изменения в DOM.
Оптимизации:
1. из массива строк получили одну длинную строку и за один раp записали innerText стало быстрее, вывод вместо тысячи итераций лучше сделать одну операцию
2. записали всю строку в innerHTML который не делает кучи проверок как innerTExt и потому работает быстрее
3. вариант не показываем весь текст, а только часть используем ленивую загрузку
4. используем devtools memory и оптимизировали создание массива solution
5. используем результаты предварительно прочитанных для нашего кейса, т.е. экономим на вычислениях
1. из массива строк получили одну длинную строку и за один раp записали innerText стало быстрее, вывод вместо тысячи итераций лучше сделать одну операцию