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
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Orbitshub
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
UiPathCommunity
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
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Orbitshub
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
UiPathCommunity
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
DianaGray10
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Victor Rentea
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
ThousandEyes
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
apidays
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
Kumar Satyam
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
Christopher Logan Kennedy
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
sammart93
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Jeffrey Haguewood
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Dropbox
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
apidays
Architecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Orbitshub
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
panagenda
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
MIND CTI
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard37
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Zilliz
Recently uploaded
(20)
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
DEV meet-up UiPath Document Understanding May 7 2024 Amsterdam
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Connector Corner: Accelerate revenue generation using UiPath API-centric busi...
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
Finding Java's Hidden Performance Traps @ DevoxxUK 2024
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
TrustArc Webinar - Unlock the Power of AI-Driven Data Discovery
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Apidays New York 2024 - Scaling API-first by Ian Reasor and Radu Cotescu, Adobe
Introduction to use of FHIR Documents in ABDM
Introduction to use of FHIR Documents in ABDM
Understanding the FAA Part 107 License ..
Understanding the FAA Part 107 License ..
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Strategize a Smooth Tenant-to-tenant Migration and Copilot Takeoff
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
Web Form Automation for Bonterra Impact Management (fka Social Solutions Apri...
DBX First Quarter 2024 Investor Presentation
DBX First Quarter 2024 Investor Presentation
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
Architecting Cloud Native Applications
Architecting Cloud Native Applications
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Why Teams call analytics are critical to your entire business
Why Teams call analytics are critical to your entire business
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
JohnPollard-hybrid-app-RailsConf2024.pptx
JohnPollard-hybrid-app-RailsConf2024.pptx
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
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