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

MelbCSS – Achieving and maintaining 60 fps

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
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
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
390
AIによるイベントストーミング図からのコード生成 / AI-powered code generation from Event Storming diagrams
Avatar for nrs nrslib
2
1.9k
並行開発のためのコードレビュー
Avatar for Miyuki miyukiw
0
260
AIで開発はどれくらい加速したのか？AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
Avatar for どすこい daisuketakeda
1
2.5k
Data-Centric Kaggle
Avatar for ねぼすけAI isax1015
2
780
Fragmented Architectures
Avatar for Denys Poltorak denyspoltorak
0
160
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
990
AIによる高速開発をどう制御するか？ ガードレール設置で開発速度と品質を両立させたチームの事例
Avatar for tonkotsuboy_com tonkotsuboy_com
7
2.4k
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
220
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
カスタマーサクセス業務を変革したヘルススコアの実現と学び
Avatar for Tomoyuki Hamaguchi _hummer0724
0
710

Featured

See All Featured
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
17k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
0
140
XXLCSS - How to scale CSS and keep your sanity
Avatar for Zaharenia Atzitzikaki sugarenia
249
1.3M
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Chasing Engaging Ingredients in Design
Avatar for Sebastian Deterding codingconduct
0
110
AI: The stuff that nobody shows you
Avatar for John Nunemaker jnunemaker
PRO
2
260
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.4k
What does AI have to do with Human Rights?
Avatar for Per Axbom axbom
PRO
0
2k
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
53
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
187
22k

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!