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
CSC307 Lecture 10
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
660
フロントエンド開発の勘所 -複数事業を経験して見えた判断軸の違い-
Avatar for Yoichiro Kubo heimusu
7
2.8k
Amazon Bedrockを活用したRAGの品質管理パイプライン構築
Avatar for とすり tosuri13
5
750
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
180
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
240
Apache Iceberg V3 and migration to V3
Avatar for Tomohiro Tanaka tomtanaka
0
160
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
380
疑似コードによるプロンプト記述、どのくらい正確に実行される？
Avatar for kokuyouwind kokuyouwind
0
390
生成AIを使ったコードレビューで定性的に品質カバー
Avatar for Chiaki Okamoto chiilog
1
270
AIエージェントのキホンから学ぶ「エージェンティックコーディング」実践入門
Avatar for Masahiro Nishimi masahiro_nishimi
5
470

Featured

See All Featured
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
56
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
250
Organizational Design Perspectives: An Ontology of Organizational Design Elements
Avatar for Dr. Kim W Petersen kimpetersen
PRO
1
200
Mind Mapping
Avatar for Hélio Medeiros helmedeiros
PRO
0
88
Crafting Experiences
Avatar for Bethany Jepchumba bethany
1
49
End of SEO as We Know It (SMX Advanced Version)
Avatar for Michael King ipullrank
3
3.9k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
640
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.5k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
408
66k
We Are The Robots
Avatar for Honza Javorek honzajavorek
0
160
The innovator’s Mindset - 
Leading Through an Era of Exponential Change - McGill University 2025
Avatar for Jean-Marc De Jonghe jdejongh
PRO
1
93

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!