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
Frontend NE
May 04, 2016
Technology
0
560
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
220
CSS Regression testing - James A Lambert @ FrontendNE
frontendne
1
200
Building a design system for Lloyds Banking - Lilly Dart @ FrontendNE
frontendne
0
940
What I learnt about hiring diverse teams from conducting a fully-anonymous recruitment process - Bethan Vicent
frontendne
0
140
Web Design that Doesn't Make Trans People Uncomfortable - Jessica Kelsall
frontendne
0
530
Contain yourself - Docker for developers
frontendne
2
160
Design process of a website
frontendne
0
140
What the JAMstack?
frontendne
1
620
Talking the talk
frontendne
0
310
Other Decks in Technology
See All in Technology
2024春 注目のWeb系 OSS & SaaS 3選
makies
0
180
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
2
590
よく聞くけど使ったことないソフトウェアNo.1 KafkaとSnowflake
foursue
4
510
Building Dashboards as a Hobby
egmc
0
370
M5stackで使用できるpHセンサの開発
shinrinakamura
0
120
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
2
140
On Your Data を超えていく!
hirotomotaguchi
2
750
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
330
MapLibreとAmazon Location Service
dayjournal
1
190
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
3
620
コードや知識を組み込む / Incorporate Code and knowledge
ks91
PRO
0
150
Tellus の衛星データを見てみよう #mf_fukuoka
kongmingstrap
0
270
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
Web Components: a chance to create the future
zenorocha
306
41k
Designing the Hi-DPI Web
ddemaree
276
33k
Visualization
eitanlees
137
14k
Docker and Python
trallard
35
2.7k
Six Lessons from altMBA
skipperchong
22
3k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
7
3.4k
Rails Girls Zürich Keynote
gr2m
91
13k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
Product Roadmaps are Hard
iamctodd
45
9.7k
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