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
Agentic AI: Evolution oder Revolution
Avatar for Lars Roewekamp mobilelarson
PRO
0
180
RAGでハマりがちな"Excelの罠"を、データの構造化で突破する
Avatar for harumi harumiweb
9
2.9k
Rで始めるML・LLM活用入門
Avatar for wakama1994 wakamatsu_takumu
0
180
AI時代のシステム設計：ドメインモデルで変更しやすさを守る設計戦略
Avatar for 増田 亨 masuda220
PRO
5
1k
ふつうのRubyist、ちいさなデバイス、大きな一年 / Ordinary Rubyists, Tiny Devices, Big Year
Avatar for chobishiba chobishiba
1
460
Go Conference mini in Sendai 2026 : Goに新機能を提案し実装されるまでのフロー徹底解説
Avatar for Takahito Yamatoya yamatoya
0
590
How to stabilize UI tests using XCTest
Avatar for Akio Itaya akkeylab
0
130
Go 1.26でのsliceのメモリアロケーション最適化 / Go 1.26 リリースパーティ #go126party
Avatar for mazrean mazrean
1
400
モダンOBSプラグイン開発
Avatar for Kaito Udagawa umireon
0
130
Claude Code Skill入門
Avatar for maya mayahoney
0
390
GC言語のWasm化とComponent Modelサポートの実践と課題 - Scalaの場合
Avatar for Rikito Taniguchi tanishiking
0
110
AIとペアプロして処理時間を97%削減した話 #pyconshizu
Avatar for Kashun Yoshida kashewnuts
1
240

Featured

See All Featured
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
4.1k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.7k
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
Done Done
Avatar for chrislema chrislema
186
16k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
690
The Illustrated Guide to Node.js - THAT Conference 2024
Avatar for David Neal reverentgeek
1
310
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
70
How Software Deployment tools have changed in the past 20 years
Avatar for Geshan Manandhar geshan
0
32k

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!