В видео разберём как работать с вкладкой performance в chrome devtools. Изучим инструменты fps, перерисовку страницы, слои и многое другое.
🍀 Поддержать канал: https://www.donationalerts.com/r/webelart
☕️ Купить кофе: https://buy.stripe.com/5kA7sL9574SG7xCfZ3
🎨 Купить набор кистей Procreate: https://webelart.com/illustration.
✍️ Мой telegram channel: https://t.me/webelart
🏰 Английский YouTube: @webelart_en
💁🏼♀️ Инстаграм: https://www.instagram.com/webelart
🦄 LinkedIn: https://www.linkedin.com/company/webelart
❤️ Поддержать развитие канала: https://www.patreon.com/webelart
Примеры из видео:
🌱 Пример из статей про performance: https://googlechrome.github.io/devtools-samples/jank/
🌱 Несколько видов анимаций: https://github.com/liveldi/animation_test
✨ Ссылка на видео «Как написать плавную веб-анимацию» — https://youtu.be/Vva9L_QJwrc
Статьи по теме:
⭐️ Investigate Animation Performance with DevTools — https://calibreapp.com/blog/investigate-animation-performance-with-devtools
⭐️ Analyze runtime performance — https://developer.chrome.com/docs/devtools/evaluate-performance/
⭐️ Using The Chrome DevTools FPS meter — https://gilfink.medium.com/quick-tip-using-the-chrome-devtools-fps-meter-1bb400b63f7
00:00 введение.
01:15 открываем браузер incognito.
02:10 запускаем пример и замедляем CPU.
05:45 записываем анимацию и изучаем вывод.
14:46 скачиваем пример с разными анимациями.
16:31 изучаем fps.
18:46 изучаем performance.
26:29 работаем со слоями.
29:55 отрисовка элементов страницы.
На канале я рассматриваю различные темы веб-разработки, на текущий момент: веб-основы, веб-анимации, веб-дизайн.