Submit Search
Upload
Performance em animações
•
10 likes
•
3,098 views
Hugo Bessa
Follow
Como melhorar a performance em animações CSS
Read less
Read more
Technology
Report
Share
Report
Share
1 of 34
Download now
Download to read offline
Recommended
COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
InSide Training
Sviluppo di interfacce web con React.JS
Sviluppo di interfacce web con React.JS
InSide Training
110623 ra how to map network drive
110623 ra how to map network drive
Roger Amedikou
Partial Application in Javascript (and why I like it)
Partial Application in Javascript (and why I like it)
blessYahu
Webkit Transitions. The Good, The Bad, & The Awesome
Webkit Transitions. The Good, The Bad, & The Awesome
davatron5000
The Canvas Tag
The Canvas Tag
Dave Ross
5 tips for your HTML5 games
5 tips for your HTML5 games
Ernesto Jiménez
Automating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with Gulp
Anderson Aguiar
Recommended
COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
COSTRUIRE INTERFACCE WEB UTILIZZANDO REACTJS (Gabriele Petronella)
InSide Training
Sviluppo di interfacce web con React.JS
Sviluppo di interfacce web con React.JS
InSide Training
110623 ra how to map network drive
110623 ra how to map network drive
Roger Amedikou
Partial Application in Javascript (and why I like it)
Partial Application in Javascript (and why I like it)
blessYahu
Webkit Transitions. The Good, The Bad, & The Awesome
Webkit Transitions. The Good, The Bad, & The Awesome
davatron5000
The Canvas Tag
The Canvas Tag
Dave Ross
5 tips for your HTML5 games
5 tips for your HTML5 games
Ernesto Jiménez
Automating Large Applications on Modular and Structured Form with Gulp
Automating Large Applications on Modular and Structured Form with Gulp
Anderson Aguiar
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
Mo Jangda
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
Sanjoy Kr. Paul
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
Patrick Chanezon
Accelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
Getting Visual with Ruby Processing
Getting Visual with Ruby Processing
Richard LeBer
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
Andrea Verlicchi
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
Lohith Goudagere Nagaraj
mloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game development
David Galeano
Web Presentations, deck.js and Extensions
Web Presentations, deck.js and Extensions
remiemonet
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Johan Andersson
CSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp Presentation
Estelle Weyl
Looking glassrenderinglt en
Looking glassrenderinglt en
優介 黒河
Keep calm and let's play CSS3
Keep calm and let's play CSS3
A2 Comunicação
Css3 101
Css3 101
Ignacio Coloma
Doing More With Less
Doing More With Less
David Engel
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
Patrick Chanezon
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Codemotion
Slides mihail-ivanchev-1
Slides mihail-ivanchev-1
Droidcon Berlin
Building a Visualization Language
Building a Visualization Language
jeresig
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
More Related Content
Similar to Performance em animações
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
Mo Jangda
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
Sanjoy Kr. Paul
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Thomas Fuchs
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
Patrick Chanezon
Accelerated Stylesheets
Accelerated Stylesheets
Wynn Netherland
Getting Visual with Ruby Processing
Getting Visual with Ruby Processing
Richard LeBer
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
Andrea Verlicchi
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
Lohith Goudagere Nagaraj
mloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game development
David Galeano
Web Presentations, deck.js and Extensions
Web Presentations, deck.js and Extensions
remiemonet
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Johan Andersson
CSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp Presentation
Estelle Weyl
Looking glassrenderinglt en
Looking glassrenderinglt en
優介 黒河
Keep calm and let's play CSS3
Keep calm and let's play CSS3
A2 Comunicação
Css3 101
Css3 101
Ignacio Coloma
Doing More With Less
Doing More With Less
David Engel
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
Patrick Chanezon
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Codemotion
Slides mihail-ivanchev-1
Slides mihail-ivanchev-1
Droidcon Berlin
Building a Visualization Language
Building a Visualization Language
jeresig
Similar to Performance em animações
(20)
HTML5, CSS3, and other fancy buzzwords
HTML5, CSS3, and other fancy buzzwords
CSS Less framework overview, Pros and Cons
CSS Less framework overview, Pros and Cons
I Can't Believe It's Not Flash
I Can't Believe It's Not Flash
Google's HTML5 Work: what's next?
Google's HTML5 Work: what's next?
Accelerated Stylesheets
Accelerated Stylesheets
Getting Visual with Ruby Processing
Getting Visual with Ruby Processing
Css3 transitions and animations + graceful degradation with jQuery
Css3 transitions and animations + graceful degradation with jQuery
HTML5 - A Whirlwind tour
HTML5 - A Whirlwind tour
mloc.js 2014 - JavaScript and the browser as a platform for game development
mloc.js 2014 - JavaScript and the browser as a platform for game development
Web Presentations, deck.js and Extensions
Web Presentations, deck.js and Extensions
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
CSS3 For WebKit: iPadDevCamp Presentation
CSS3 For WebKit: iPadDevCamp Presentation
Looking glassrenderinglt en
Looking glassrenderinglt en
Keep calm and let's play CSS3
Keep calm and let's play CSS3
Css3 101
Css3 101
Doing More With Less
Doing More With Less
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
JavaOne 2009 - 2d Vector Graphics in the browser with Canvas and SVG
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Massimo Artizzu - The tricks of Houdini: a magic wand for the future of CSS -...
Slides mihail-ivanchev-1
Slides mihail-ivanchev-1
Building a Visualization Language
Building a Visualization Language
Recently uploaded
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
Addepto
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
gvaughan
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Databarracks
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Kalema Edgar
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Zilliz
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
Dilum Bandara
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Lonnie McRorey
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Enterprise Knowledge
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Precisely
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
Sergiu Bodiu
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Stephanie Beckett
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Mattias Andersson
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
Manik S Magar
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Fwdays
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Miki Katsuragi
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Alfredo García Lavilla
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
LoriGlavin3
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
Fwdays
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
Sri Ambati
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
ScyllaDB
Recently uploaded
(20)
Gen AI in Business - Global Trends Report 2024.pdf
Gen AI in Business - Global Trends Report 2024.pdf
WordPress Websites for Engineers: Elevate Your Brand
WordPress Websites for Engineers: Elevate Your Brand
How to write a Business Continuity Plan
How to write a Business Continuity Plan
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Leverage Zilliz Serverless - Up to 50X Saving for Your Vector Storage Cost
Advanced Computer Architecture – An Introduction
Advanced Computer Architecture – An Introduction
TeamStation AI System Report LATAM IT Salaries 2024
TeamStation AI System Report LATAM IT Salaries 2024
Designing IA for AI - Information Architecture Conference 2024
Designing IA for AI - Information Architecture Conference 2024
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
Hyperautomation and AI/ML: A Strategy for Digital Transformation Success.pdf
DevEX - reference for building teams, processes, and platforms
DevEX - reference for building teams, processes, and platforms
What's New in Teams Calling, Meetings and Devices March 2024
What's New in Teams Calling, Meetings and Devices March 2024
Are Multi-Cloud and Serverless Good or Bad?
Are Multi-Cloud and Serverless Good or Bad?
Anypoint Exchange: It’s Not Just a Repo!
Anypoint Exchange: It’s Not Just a Repo!
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
Commit 2024 - Secret Management made easy
Commit 2024 - Secret Management made easy
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
Merck Moving Beyond Passwords: FIDO Paris Seminar.pptx
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
"LLMs for Python Engineers: Advanced Data Analysis and Semantic Kernel",Oleks...
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
H2O.ai CEO/Founder: Sri Ambati Keynote at Wells Fargo Day
Developer Data Modeling Mistakes: From Postgres to NoSQL
Developer Data Modeling Mistakes: From Postgres to NoSQL
Performance em animações
1.
Perfomance em animações @hugobessaa
2.
+ bonito + rico
3.
+++ UX
4.
5.
6.
7.
16ms 16ms 16ms
16ms 16ms 60fps
8.
16ms JS Layout Paint Setup Paint
Composite Layers
9.
Layout
10.
Layout .box { width: 300px; height:
300px; margin: 10px; // ... }
11.
Layout
12.
Layout
13.
Paint
14.
Paint .box { color: green; border-style:
solid; // ... }
15.
Paint
16.
Paint
17.
Composite Layer
18.
Composite Layer .box { opacity:
0.5; transform: scale(1.2); // ... }
19.
Composite Layer
20.
Composite Layer
21.
Composite Layer 2 layers
22.
Layout Paint Setup Paint Composite Layers Devagar OK Rápido
23.
Layout Paint Setup Paint Composite Layers Devagar OK Rápido Horrivelmente lento Lento Rápido Desktop
Mobile
24.
Composite Layer .box { opacity:
0.5; transform: translateZ(0); // ... } cria nossa Composite Layer
25.
Composite Layer .box { opacity:
0.5; transform: translate3d(0, 0, 0); // ... } cria nossa Composite Layer
26.
Composite Layer .box { opacity:
0.5; transform: translate3d(0, 0, 0); // ... } cria nossa Composite LayerHACK
27.
Composite Layer .box { opacity:
0.5; will-change: opacity; // ... } bit.ly/will-change-prop
28.
Composite Layer opacity scale translate
rotate
29.
JavaScript Layout Trashing
30.
Layout Trashing clientHeight, offsetTop,
height, width, scrollTo... Isso obriga o browser a recalcular todo o layout
31.
Layout Trashing clientHeight, clientLeft,
clientTop, clientWidth, focus(), getBoundingClientRect(), getClientRects(), innerText, offsetHeight, offsetLeft, offsetParent, offsetTop, offsetWidth, outerText, scrollByLines(), scrollByPages(), scrollHeight, scrollIntoView(), scrollIntoViewIfNeeded(), scrollLeft, scrollTop, scrollWidth, height, width, getBoundingClientRect(), getClientRects(), computeCTM(), getBBox(), getCharNumAtPosition(), getComputedTextLength(), getEndPositionOfChar(), getExtentOfChar(), getNumberOfChars(), getRotationOfChar(), getStartPositionOfChar(), getSubStringLength(), selectSubString(), instanceRoot, getComputedStyle(), scrollBy(), scrollTo(), scrollX, scrollY, webkitConvertPointFromNodeToPage(), webkitConvertPointFromPageToNode() bit.ly/layout-trashing-js
32.
33.
Referências bit.ly/css-prop-operations bit.ly/runtime-perf bit.ly/mobile-perf-auditing bit.ly/high-perf-anim
34.
Obrigado! @hugobessaa
Download now