A talk on some problems solved related to CSS Performance at GitHub. The talk was given at CSS Dev Conference in Honolulu, HI 2012. I recorded the presentation from my laptop and posted it here https://vimeo.com/54990931
Css Performancewh J RonGHub’s
View Slide
Tnk y f comg
Th talk abtPfmce probms GHubHow ce ft C HTMLC/HTML ols GHub
brief about meJ Ron’s
Hello, I’m @JonRohanphoto by Zachary Kaplan
I’m a Dign-gr
B.S. Comput Sce
8 yrs C
I’m a GHu
photo by @janaboruta
Performance woesGHub’s
SlowScaryGitHub
I’m talkg abt diff pag
“a mium size diff”
~9,0 l acrs a fis
~80% pagoad calcung
28.16s calcute sty!
Wt caus sty calcung?
Mipung DOM
Hidg usg .display: none;visibility: hidden;
C Animns
Us Acs
A bad ...
may cause brows h
Something went wrong while displaying this keynote Tocontinue, press Reload or go to another talk.
trouble cssGHub’s
no uecsy tag iifis
#navigation, .menu { margin-‐left: 0;}1234ulul
#navigation, .menu { margin-‐left: 0;}1234
no crs
html div tr td { font-‐weight: bold;}123
html div tr td { font-‐weight: bold;}123td
html div tr td { font-‐weight: bold;}123tr td
html div tr td { font-‐weight: bold;}123html div tr td
no univsal secrs
* { display: block;}123
no unqualifi secrs
[class^="mini-‐icon-‐"] { display: block;}123
no cg
{ width: 30px;}123.small.private.icon
{ width: 30px;}123.small-‐private-‐icon
r imptce(wn y do c)
webk bug?
{ width: 30px;}123.foo.barIex m_classRulesu key .foo
{ width: 30px;}123.bar.fooIex m_classRulesu key .bar
{ width: 30px;}123input[type=text].errorIex m_tagRules
{ width: 30px;}123input.error[type=text]Iex m_classRules
{ width: 30px;}123.bar#fooIex m_classRules
{ width: 30px;}123#foo.barIex m_idRules
June July August September October November47004875505052255400numb c secrs
It’s a ve
C + HTML
HTML overloadGHub’s
how much html do we ve?
a typical diff le
5 7 + this is a line in the diff 12345678
avage diffs ve ~9,0 l
> $('#files_bucket *').length
> $('#files_bucket *').length48917
but ’s not a probm
15ms pagoad
wt c we do?
duce am mcd html
solutionsGHub’s
k simp
move uecsy html
Ki wh fi
5 7 + this is a line in the diff 12345678+ this is a line in the diff
6,387 uecsy divs
move f le numbs
5 7 + this is a line in the diff 1234567857
Improv Rr spd by 37%
S! S!
3.5% spd improvemt
did lp?
January February March April May June July August September October November0150300450600pagoad me st 12 ms
shortcutsGHub’s
GHub Prim
facr c usab compts
SWT! C
SWT! Csecrs
SS powful dgs
button.classy, a.button.classy,button.classy:disabled:hover, a.button.classy.disabled:hover { border-‐radius: 3px; &.primary { color: #fff; &:hover { border-‐color: #4a993e; } &.mousedown { border-‐bottom-‐color: darken(#8add6d, 10%); } &:disabled, &.disabled { &, &:hover { border-‐color: #74bb5a; } } }}1234567891011121314
button.classy:disabled:hover.mousedown,a.button.classy:disabled:hover.mousedown,a.button.classy.disabled:hover.mousedown...
Max 3 vs
Wow, w sy
NOPE
GHub s grown
peop who ucd c
c vops
strat sucks!
GHub op like op srce
toolsGHub’s
C Exp
“Think of it like SQL EXPLAIN, but for CSS selectors.”- https://github.com/josh/css-explain
> cssExplain("li .item"){ "selector": "li .item", "parts": ["li", ".item"], "specificity": [0, 1, 1], "category": "class", "key": "item", "score": 6}
Webk Dev Tls
C Prir
Time
Auds
Graphe
“Graphite is a highly scalable real-time graphing system.”- http://graphite.wikidot.com/faq
cb (backd)
“Data collection agents connect to carbon and send their data...”- http://graphite.wikidot.com/carbon
whp (DB)
“It provides fast, reliable storage of numeric data over time.”- http://graphite.wikidot.com/whisper
T Graph S
Graphs Evyw
too long; didn’t readJ Ron’s
Simplifi C
Try mimize HTML DOM mcs
Refacr use C
Tmwk
Graph M Evyg
Tnk Y@jonrohanYou can find this presentation at http://speakerdeck.com/jonrohan
jonrohan
munetoshi
syossan27
tomokusaba
pineapplecandy
satoshi7190
totokit4
horie1024
k0kubun
beberlei
ivargrimstad
cassininazir
caitiem20
zakiyama
akosma
iamctodd
addyosmani
mclloyd
keathley
malarkey
phodgson
eileencodes
danielanewman