Upgrade to Pro — share decks privately, control downloads, hide ads and more …

MelbCSS – Achieving and maintaining 60 fps

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for James Friend James Friend
February 03, 2016
Programming
0
89

MelbCSS – Achieving and maintaining 60 fps

Given at MelbCSS

I've annotated some of the slides with relevant links in place of the live demos

Avatar for James Friend

James Friend

February 03, 2016
Tweet

More Decks by James Friend

See All by James Friend
React Melbourne - Animating UI
Avatar for James Friend jsdf
0
60
Porting Native code with Emscripten or: Not Reinventing the Wheel in JS
Avatar for James Friend jsdf
0
87

Other Decks in Programming

See All in Programming
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
160
Package Management Learnings from Homebrew
Avatar for Mike McQuaid mikemcquaid
0
230
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
780
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
590
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.4k
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
140
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
Patterns of Patterns
Avatar for Denys Poltorak denyspoltorak
0
1.4k
AIエージェント、”どう作るか”で差は出るか？ / AI Agents: Does the "How" Make a Difference?
Avatar for r-kagaya rkaga
4
2k
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
380

Featured

See All Featured
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.1k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Building AI with AI
Avatar for Ines Montani inesmontani
PRO
1
700
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k
Building an army of robots
Avatar for Kyle Neath kneath
306
46k
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
170
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
Jess Joyce - The Pitfalls of Following Frameworks
Avatar for Tech SEO Connect techseoconnect
PRO
1
66
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
273
21k
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.4k
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k

Transcript

  1. Achieving and maintaining 60 fps James Friend

  2. CSS or JS animations? It doesn’t really matter that much

  3. Rebound http://facebook.github.io/rebound-js/examples/

  4. Main things that a browser can animate cheaply: transform: translate

    transform: scales transform: rotate opacity* *sometimes http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/

  5. Devtools https://developers.google.com/web/tools/chrome-devtools/profile/evaluate- performance/timeline-tool?hl=en

  6. Used to look like this

  7. Automate it instead https://github.com/axemclion/perfjankie http://calendar.perfplanet.com/2015/using-chrome- traces-to-automate-rendering https://github.com/axemclion/browser-perf

  8. Links to more info https://github.com/jsdf/melbcss-60fps-talk

  9. We’re hiring!