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

MelbCSS – Achieving and maintaining 60 fps

Avatar for James Friend James Friend
February 03, 2016
Programming
0
87

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
59
Porting Native code with Emscripten or: Not Reinventing the Wheel in JS
Avatar for James Friend jsdf
0
86

Other Decks in Programming

See All in Programming
Serena MCPのすすめ
Avatar for wadakatu wadakatu
4
1k
iOSエンジニア向けの英語学習アプリを作る！
Avatar for yukawashouhei yukawashouhei
0
190
明日から始めるリファクタリング
Avatar for ryounasso ryounasso
0
140
Flutterで分数(Fraction)を表示する方法
Avatar for kouki.miura koukimiura
0
130
CSC305 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
230
私はどうやって技術力を上げたのか
Avatar for Yusuke Wada yusukebe
43
18k
Range on Rails ―「多重範囲型」という新たな選択肢が、複雑ロジックを劇的にシンプルにしたワケ
Avatar for RIZAPテクノロジーズ rizap_tech
0
150
CSC509 Lecture 03
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
340
bootcamp2025_バックエンド研修_WebAPIサーバ作成.pdf
Avatar for GENIEE ,Inc geniee_inc
0
110
XP, Testing and ninja testing ZOZ5
Avatar for seki at druby.org m_seki
3
670
What's new in Spring Modulith?
Avatar for Oliver Drotbohm olivergierke
1
150
登壇は dynamic! な営みである / speech is dynamic
Avatar for Daichi KUDO da1chi
0
340

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
132
19k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.9k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
329
39k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
7.9k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
6.7k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
230
22k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
353
21k

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!