'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

0 likes•230 views

Документ обсуждает оптимизацию видео и изображений для веб-приложений, включая использование кодеков AV1 и различные форматы изображений. Упоминаются проблемы с производительностью, такие как торможение из-за декодирования изображений и необходимость применения preload. Также представлены ссылки на ресурсы и инструменты для улучшения анимации и визуализации.

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

Опять анимация

Юра

Верстка

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

я же знаю WebGL!

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

GLTF!

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

35Mb

и это
без анимаций

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

сделаю все
картинками

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

Проседает FPS

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

но я же сделал
preload!

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

драматический зум
и look of disaproval в
надписи

Image de-шо?🤨

The decoding of the image can
block the main thread and by
that cause jank in an app.

Image Decode API

Везде!

🎉🎉🎉

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

out of memory

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

Видео!

FRAME-001.jpg
FRAME-002.jpg
FRAME-003.jpg

прозрачное видео

https://www.nytimes.com/paidpost/allbirds/the-view-from-above.html

200 кадров
8 секунд

2Mb

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

video.currentTime = time;

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

отчаяние

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

GOP

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

GOP 3
GOP 5
GOP 10

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

2Mb

другие кодеки

https://evilmartians.com/chronicles/better-web-video-with-av1-codec

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

600Kb

Сжатие 8 секунд видео
0
3,5
7
10,5
14
h264 average sex av1минуты

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

35Mb➡8mb➡600kb

другая анимация

Но все же, если 3D

[video]

видео?

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

13Mb — GLTF

.GLTF
.JPEG

.GLTF
.JPEG .GLTF

.GLTF
.JPEG .GLTF

.GLTF
.JPEG .GLTF
6Mb 7Mb

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

7Mb 600Kb

6Mb 1Mb
.basis картинки

Картинки
• AVIF

• WEBP

ок, 1.6Mb 🎉
но тормозит :(

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

[video]

ﬁxed 30 fps

[video]

🎉🎉🎉

можно еще лучше

REACT-THREE-FIBER

60 строк

https://codesandbox.io/s/sweet-babbage-66cd7

EPIC

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

в любой непонятной
ситуации ешьте
десерт

Дякую!
• riverco.de - працюю

• twitter.com/akella

• youtube.com/user/ﬂintyara

• facebook.com/akella

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

Дякую!
• riverco.de - працюю

• twitter.com/akella

• youtube.com/user/ﬂintyara

• facebook.com/akella

Ad

Recommended

PPTX

Большие проблемы маленьких устройствAlexander Kalouguine

PPTX

Вредные советы для разработчиковITCrowd Almaty

PPT

Портирование C++ приложений на FLASCC: опыт Unreal Engine 3. Павел Наказненко...Unigine Corp.

PDF

Бэкенд, фронтенд — всё смешалось (nodkz)Pavel Chertorogov

PDF

Sergii Puzankov «UI Regression Testing with "Gemini"»LogeekNightUkraine

PDF

«How I Learned to Stop Worrying and Love the BFG: нагрузочное тестирование со...it-people

PPT

Current State of Server Side JavaScriptOleg Podsechin

PDF

ChocoDevDay — Grunt - Advanced Tips (NIkita Bayev)Hassan Islamov

PPTX

'GraphQL Schema Design' by Borys Mohyla. OdessaJS'2021OdessaJS Conf

PDF

'How i came up with my talk' by Yurii Artiukh. OdessaJS'2021OdessaJS Conf

PDF

"Is there life in react without redux" by Babich Sergiy. OdessaJS'2021OdessaJS Conf

PPTX

Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...OdessaJS Conf

PPTX

Андрій Троян. Розробка мікросервісів з NestJS. OdessaJS'2021OdessaJS Conf

PPTX

Олексій Гончар "Використання Electron в розробці корпоративної відео-мессeндж...OdessaJS Conf

PDF

Максим Климишин "Що такого особливого у пропозиції вартості шаблону Micro Fro...OdessaJS Conf

PDF

Павло Галушко. GOOD CODE MYTHS. OdessaJS'2021OdessaJS Conf

PPTX

"NODEJS & GRAPHQL COOKBOOK. LET’S TALK ABOUT MICRO-SERVICES" by Антон Чередні...OdessaJS Conf

PPTX

'BUILDING ANGULAR APPS WITH NX' by Anastasia NecheporenkoOdessaJS Conf

PPTX

'IS THERE JAVASCRIPT ON SWAGGER PLUGINS?' by Dmytro GusevOdessaJS Conf

PPTX

'ETHEREUM SMART CONTRACTS ON JS' by Yaroslav DvorovenkoOdessaJS Conf

PPTX

'GOLANG USAGE IN DEVELOPMENT OF NODE.JS APPLICATIONS (NODE.JS: IN GO WE TRUST...OdessaJS Conf

PPTX

'MICROFRONTENDS WITH REACT' by Liliia KarpenkoOdessaJS Conf

PDF

'Web performance metrics' BY ROMAN SAVITSKYI at OdessaJS'2020OdessaJS Conf

PDF

'JavaScript was invented in Odessa' by DMITRIY GUSEV at OdessaJS'2020OdessaJS Conf

PDF

'Why svelte' by BORYS MOHYLA at OdessaJS'2020OdessaJS Conf

PDF

'Effective node.js development' by Viktor Turskyi at OdessaJS'2020OdessaJS Conf

PDF

'Tensorflow.js in real life' by Pavlo Galushko at OdessaJS'2020OdessaJS Conf

PDF

'React+d3=LOVE' by Illia Olenchenko at OdessaJS'2020OdessaJS Conf

More Related Content

PPTX

Большие проблемы маленьких устройствAlexander Kalouguine

PPTX

Вредные советы для разработчиковITCrowd Almaty

PPT

Портирование C++ приложений на FLASCC: опыт Unreal Engine 3. Павел Наказненко...Unigine Corp.

PDF

Бэкенд, фронтенд — всё смешалось (nodkz)Pavel Chertorogov

PDF

Sergii Puzankov «UI Regression Testing with "Gemini"»LogeekNightUkraine

PDF

«How I Learned to Stop Worrying and Love the BFG: нагрузочное тестирование со...it-people

PPT

Current State of Server Side JavaScriptOleg Podsechin

PDF

ChocoDevDay — Grunt - Advanced Tips (NIkita Bayev)Hassan Islamov

Большие проблемы маленьких устройствAlexander Kalouguine

Вредные советы для разработчиковITCrowd Almaty

Портирование C++ приложений на FLASCC: опыт Unreal Engine 3. Павел Наказненко...Unigine Corp.

Бэкенд, фронтенд — всё смешалось (nodkz)Pavel Chertorogov

Sergii Puzankov «UI Regression Testing with "Gemini"»LogeekNightUkraine

«How I Learned to Stop Worrying and Love the BFG: нагрузочное тестирование со...it-people

Current State of Server Side JavaScriptOleg Podsechin

ChocoDevDay — Grunt - Advanced Tips (NIkita Bayev)Hassan Islamov

More from OdessaJS Conf (20)

PPTX

'GraphQL Schema Design' by Borys Mohyla. OdessaJS'2021OdessaJS Conf

PDF

'How i came up with my talk' by Yurii Artiukh. OdessaJS'2021OdessaJS Conf

PDF

"Is there life in react without redux" by Babich Sergiy. OdessaJS'2021OdessaJS Conf

PPTX

Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...OdessaJS Conf

PPTX

Андрій Троян. Розробка мікросервісів з NestJS. OdessaJS'2021OdessaJS Conf

PPTX

Олексій Гончар "Використання Electron в розробці корпоративної відео-мессeндж...OdessaJS Conf

PDF

Максим Климишин "Що такого особливого у пропозиції вартості шаблону Micro Fro...OdessaJS Conf

PDF

Павло Галушко. GOOD CODE MYTHS. OdessaJS'2021OdessaJS Conf

PPTX

"NODEJS & GRAPHQL COOKBOOK. LET’S TALK ABOUT MICRO-SERVICES" by Антон Чередні...OdessaJS Conf

PPTX

'BUILDING ANGULAR APPS WITH NX' by Anastasia NecheporenkoOdessaJS Conf

PPTX

'IS THERE JAVASCRIPT ON SWAGGER PLUGINS?' by Dmytro GusevOdessaJS Conf

PPTX

'ETHEREUM SMART CONTRACTS ON JS' by Yaroslav DvorovenkoOdessaJS Conf

PPTX

'GOLANG USAGE IN DEVELOPMENT OF NODE.JS APPLICATIONS (NODE.JS: IN GO WE TRUST...OdessaJS Conf

PPTX

'MICROFRONTENDS WITH REACT' by Liliia KarpenkoOdessaJS Conf

PDF

'Web performance metrics' BY ROMAN SAVITSKYI at OdessaJS'2020OdessaJS Conf

PDF

'JavaScript was invented in Odessa' by DMITRIY GUSEV at OdessaJS'2020OdessaJS Conf

PDF

'Why svelte' by BORYS MOHYLA at OdessaJS'2020OdessaJS Conf

PDF

'Effective node.js development' by Viktor Turskyi at OdessaJS'2020OdessaJS Conf

PDF

'Tensorflow.js in real life' by Pavlo Galushko at OdessaJS'2020OdessaJS Conf

PDF

'React+d3=LOVE' by Illia Olenchenko at OdessaJS'2020OdessaJS Conf

'GraphQL Schema Design' by Borys Mohyla. OdessaJS'2021OdessaJS Conf

'How i came up with my talk' by Yurii Artiukh. OdessaJS'2021OdessaJS Conf

"Is there life in react without redux" by Babich Sergiy. OdessaJS'2021OdessaJS Conf

Олексій Павленко. CONTRACT PROTECTION ON THE FRONTEND SIDE: HOW TO ORGANIZE R...OdessaJS Conf

Андрій Троян. Розробка мікросервісів з NestJS. OdessaJS'2021OdessaJS Conf

Олексій Гончар "Використання Electron в розробці корпоративної відео-мессeндж...OdessaJS Conf

Максим Климишин "Що такого особливого у пропозиції вартості шаблону Micro Fro...OdessaJS Conf

Павло Галушко. GOOD CODE MYTHS. OdessaJS'2021OdessaJS Conf

"NODEJS & GRAPHQL COOKBOOK. LET’S TALK ABOUT MICRO-SERVICES" by Антон Чередні...OdessaJS Conf

'BUILDING ANGULAR APPS WITH NX' by Anastasia NecheporenkoOdessaJS Conf

'IS THERE JAVASCRIPT ON SWAGGER PLUGINS?' by Dmytro GusevOdessaJS Conf

'ETHEREUM SMART CONTRACTS ON JS' by Yaroslav DvorovenkoOdessaJS Conf

'GOLANG USAGE IN DEVELOPMENT OF NODE.JS APPLICATIONS (NODE.JS: IN GO WE TRUST...OdessaJS Conf

'MICROFRONTENDS WITH REACT' by Liliia KarpenkoOdessaJS Conf

'Web performance metrics' BY ROMAN SAVITSKYI at OdessaJS'2020OdessaJS Conf

'JavaScript was invented in Odessa' by DMITRIY GUSEV at OdessaJS'2020OdessaJS Conf

'Why svelte' by BORYS MOHYLA at OdessaJS'2020OdessaJS Conf

'Effective node.js development' by Viktor Turskyi at OdessaJS'2020OdessaJS Conf

'Tensorflow.js in real life' by Pavlo Galushko at OdessaJS'2020OdessaJS Conf

'React+d3=LOVE' by Illia Olenchenko at OdessaJS'2020OdessaJS Conf

Ad

'STORY OF ANOTHER ANIMATION' by YURII ARTYUKH at OdessaJS'2020

4. Опять анимация

6. Верстка

13. я же знаю WebGL!

21. и это без анимаций

23. сделаю все картинками

25. Проседает FPS

27. но я же сделал preload!

31. драматический зум и look of disaproval в надписи

32. Image de-шо?🤨

33. The decoding of the image can block the main thread and by that cause jank in an app.

34. Image Decode API

35. Везде!

36. 🎉🎉🎉

38. out of memory

40. Видео!

41. FRAME-001.jpg FRAME-002.jpg FRAME-003.jpg

42. прозрачное видео

43. https://www.nytimes.com/paidpost/allbirds/the-view-from-above.html

44. 200 кадров 8 секунд

47. video.currentTime = time;

54. отчаяние

62. GOP 3 GOP 5 GOP 10

65. другие кодеки

66. https://evilmartians.com/chronicles/better-web-video-with-av1-codec

68. ?

70. Сжатие 8 секунд видео 0 3,5 7 10,5 14 h264 average sex av1минуты

73. 35Mb➡8mb➡600kb

74. другая анимация

75. Но все же, если 3D

77. видео?

80. 13Mb — GLTF

81. .GLTF .JPEG

82. .GLTF .JPEG .GLTF

83. .GLTF .JPEG .GLTF

84. .GLTF .JPEG .GLTF 6Mb 7Mb

87. 6Mb 1Mb .basis картинки

88. Картинки • AVIF • WEBP

89. ок, 1.6Mb 🎉 но тормозит :(

99. ﬁxed 30 fps

101. 🎉🎉🎉

102. можно еще лучше

103. REACT-THREE-FIBER

104. 60 строк

105. https://codesandbox.io/s/sweet-babbage-66cd7

109. в любой непонятной ситуации ешьте десерт

110. Дякую! • riverco.de - працюю • twitter.com/akella • youtube.com/user/ﬂintyara • facebook.com/akella

114. Дякую! • riverco.de - працюю • twitter.com/akella • youtube.com/user/ﬂintyara • facebook.com/akella