Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Jankety Jank
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
Frontend NE
May 04, 2016
Technology
0
750
Jankety Jank
Frontend NE
May 04, 2016
Tweet
Share
More Decks by Frontend NE
See All by Frontend NE
Standardizing 'select': What the future holds for HTML - Stephanie Stimac @ FrontendNE
frontendne
4
410
CSS Regression testing - James A Lambert @ FrontendNE
frontendne
1
340
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
1.5k
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
290
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
750
Contain yourself - Docker for developers
frontendne
2
270
Design process of a website
frontendne
0
320
What the JAMstack?
frontendne
1
940
Talking the talk
frontendne
0
510
Other Decks in Technology
See All in Technology
Bedrock PolicyでAmazon Bedrock Guardrails利用を強制してみた
yuu551
0
210
外部キー制約の知っておいて欲しいこと - RDBMSを正しく使うために必要なこと / FOREIGN KEY Night
soudai
PRO
12
5.4k
Codex 5.3 と Opus 4.6 にコーポレートサイトを作らせてみた / Codex 5.3 vs Opus 4.6
ama_ch
0
140
日本の85%が使う公共SaaSは、どう育ったのか
taketakekaho
1
150
We Built for Predictability; The Workloads Didn’t Care
stahnma
0
140
IaaS/SaaS管理における SREの実践 - SRE Kaigi 2026
bbqallstars
4
2.1k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.3k
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
10k
Context Engineeringが企業で不可欠になる理由
hirosatogamo
PRO
3
570
【Oracle Cloud ウェビナー】[Oracle AI Database + AWS] Oracle Database@AWSで広がるクラウドの新たな選択肢とAI時代のデータ戦略
oracle4engineer
PRO
2
140
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
6
68k
顧客の言葉を、そのまま信じない勇気
yamatai1212
1
350
Featured
See All Featured
The Hidden Cost of Media on the Web [PixelPalooza 2025]
tammyeverts
2
180
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
62
49k
The Illustrated Children's Guide to Kubernetes
chrisshort
51
51k
Practical Orchestrator
shlominoach
191
11k
svc-hook: hooking system calls on ARM64 by binary rewriting
retrage
1
99
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
techseoconnect
PRO
0
57
AI: The stuff that nobody shows you
jnunemaker
PRO
2
250
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
2.1k
Why Your Marketing Sucks and What You Can Do About It - Sophie Logan
marketingsoph
0
74
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
287
14k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
12
1k
Odyssey Design
rkendrick25
PRO
1
490
Transcript
Jankety Jank
0
Jank?
Aalreet! means hello
? ? ? ? ? ? ? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?
None
100ms to 10s
Frame Budget 1000 / 60 = 16.6ish
The Rendering Pipeline Warning - browser internals are around the
bend.
Renderer Process GPU Process
Renderer Process GPU Process Compositor Compositor Worker Thread/s Main Thread
GPU Thread
None
Parsing Converting code to various tree structures
Tokeniser Parse Tree DOM Script Exe
“Scripts at the bottom”
html head meta link body p hello world DOM +
CSSOM body font-size: 16px p display: none = Render Tree body
Layout Calculate position and size of nodes in tree.
None
Batched & Immediate Browser batches changes. Certain things force an
immediate layout.
Tread Carefully Forced sync layout. Layout thrashing. http://bit.ly/1TbWsmx Batch operations.
FastDOM
Paint
Two Step Process
Draw Calls
Rasterization
Compositing
Update Layer Tree Image Decode Major GC Evaluate Script Minor
GC Timer Fired
Interval
Continous.
R.A.I.L
Example
Load - 1s
Idle - 50ms chunks
Animation - 16.6ms 8ms
You the compositor
Reduce Paint Areas will-change: transform, translateZ(0)
F.L.I.P bit.ly/1TJ4VAv
Response 100ms
e.preventDefault()
All weighted equally
Go Explore
Go Educate
Context is key
Thanks