Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
Css Performance wh J Ron GHub’s
Slide 2
Slide 2 text
Tnk y f comg
Slide 3
Slide 3 text
Th talk abt Pfmce probms GHub How ce ft C HTML C/HTML ols GHub
Slide 4
Slide 4 text
brief about me J Ron’s
Slide 5
Slide 5 text
Hello, I’m @JonRohan photo by Zachary Kaplan
Slide 6
Slide 6 text
I’m a Dign-gr
Slide 7
Slide 7 text
B.S. Comput Sce
Slide 8
Slide 8 text
8 yrs C
Slide 9
Slide 9 text
I’m a GHu
Slide 10
Slide 10 text
photo by @janaboruta
Slide 11
Slide 11 text
Performance woes GHub’s
Slide 12
Slide 12 text
Slow Scary GitHub
Slide 13
Slide 13 text
Slow Scary GitHub
Slide 14
Slide 14 text
I’m talkg abt diff pag
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
“a mium size diff”
Slide 17
Slide 17 text
~9,0 l acrs a fis
Slide 18
Slide 18 text
~80% pagoad calcung
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
28.16s calcute sty!
Slide 21
Slide 21 text
Wt caus sty calcung?
Slide 22
Slide 22 text
Mipung DOM
Slide 23
Slide 23 text
Hidg usg . display: none; visibility: hidden;
Slide 24
Slide 24 text
C Animns
Slide 25
Slide 25 text
Us Acs
Slide 26
Slide 26 text
A bad ...
Slide 27
Slide 27 text
may cause brows h
Slide 28
Slide 28 text
Something went wrong while displaying this keynote To continue, press Reload or go to another talk.
Slide 29
Slide 29 text
trouble css GHub’s
Slide 30
Slide 30 text
no uecsy tag iifis
Slide 31
Slide 31 text
#navigation, .menu { margin-‐left: 0; } 1 2 3 4 ul ul
Slide 32
Slide 32 text
#navigation, .menu { margin-‐left: 0; } 1 2 3 4
Slide 33
Slide 33 text
no crs
Slide 34
Slide 34 text
html div tr td { font-‐weight: bold; } 1 2 3
Slide 35
Slide 35 text
html div tr td { font-‐weight: bold; } 1 2 3 td
Slide 36
Slide 36 text
html div tr td { font-‐weight: bold; } 1 2 3 tr td
Slide 37
Slide 37 text
html div tr td { font-‐weight: bold; } 1 2 3 html div tr td
Slide 38
Slide 38 text
no univsal secrs
Slide 39
Slide 39 text
* { display: block; } 1 2 3
Slide 40
Slide 40 text
no unqualifi secrs
Slide 41
Slide 41 text
[class^="mini-‐icon-‐"] { display: block; } 1 2 3
Slide 42
Slide 42 text
no cg
Slide 43
Slide 43 text
{ width: 30px; } 1 2 3 .small.private.icon
Slide 44
Slide 44 text
{ width: 30px; } 1 2 3 .small-‐private-‐icon
Slide 45
Slide 45 text
r imptce (wn y do c)
Slide 46
Slide 46 text
webk bug?
Slide 47
Slide 47 text
{ width: 30px; } 1 2 3 .foo.bar Iex m_classRules u key .foo
Slide 48
Slide 48 text
{ width: 30px; } 1 2 3 .bar.foo Iex m_classRules u key .bar
Slide 49
Slide 49 text
{ width: 30px; } 1 2 3 input[type=text].error Iex m_tagRules
Slide 50
Slide 50 text
{ width: 30px; } 1 2 3 input.error[type=text] Iex m_classRules
Slide 51
Slide 51 text
{ width: 30px; } 1 2 3 .bar#foo Iex m_classRules
Slide 52
Slide 52 text
{ width: 30px; } 1 2 3 #foo.bar Iex m_idRules
Slide 53
Slide 53 text
June July August September October November 4700 4875 5050 5225 5400 numb c secrs
Slide 54
Slide 54 text
June July August September October November 4700 4875 5050 5225 5400 numb c secrs
Slide 55
Slide 55 text
It’s a ve
Slide 56
Slide 56 text
C + HTML
Slide 57
Slide 57 text
HTML overload GHub’s
Slide 58
Slide 58 text
how much html do we ve?
Slide 59
Slide 59 text
a typical diff le
Slide 60
Slide 60 text
5
7
+ this is a line in the diff
1 2 3 4 5 6 7 8
Slide 61
Slide 61 text
avage diffs ve ~9,0 l
Slide 62
Slide 62 text
> $('#files_bucket *').length
Slide 63
Slide 63 text
> $('#files_bucket *').length 48917
Slide 64
Slide 64 text
but ’s not a probm
Slide 65
Slide 65 text
No content
Slide 66
Slide 66 text
15ms pagoad
Slide 67
Slide 67 text
wt c we do?
Slide 68
Slide 68 text
duce am mcd html
Slide 69
Slide 69 text
No content
Slide 70
Slide 70 text
solutions GHub’s
Slide 71
Slide 71 text
k simp
Slide 72
Slide 72 text
move uecsy html
Slide 73
Slide 73 text
Ki wh fi
Slide 74
Slide 74 text
5
7
+ this is a line in the diff
1 2 3 4 5 6 7 8
Slide 75
Slide 75 text
5
7
+ this is a line in the diff
1 2 3 4 5 6 7 8
+ this is a line in the diff
Slide 76
Slide 76 text
6,387 uecsy divs
Slide 77
Slide 77 text
move
f le numbs
Slide 78
Slide 78 text
5
7
+ this is a line in the diff
1 2 3 4 5 6 7 8
Slide 79
Slide 79 text
5
7
+ this is a line in the diff
1 2 3 4 5 6 7 8 5 7
Slide 80
Slide 80 text
Improv Rr spd by 37%
Slide 81
Slide 81 text
S!
S!
Slide 82
Slide 82 text
5 7
+ this is a line in the diff
1 2 3 4 5 6 7 8
Slide 83
Slide 83 text
5 7
+ this is a line in the diff
1 2 3 4 5 6 7 8
Slide 84
Slide 84 text
3.5% spd improvemt
Slide 85
Slide 85 text
did lp?
Slide 86
Slide 86 text
January February March April May June July August September October November 0 150 300 450 600 pagoad me st 12 ms
Slide 87
Slide 87 text
January February March April May June July August September October November 0 150 300 450 600 pagoad me st 12 ms
Slide 88
Slide 88 text
January February March April May June July August September October November 0 150 300 450 600 pagoad me st 12 ms
Slide 89
Slide 89 text
shortcuts GHub’s
Slide 90
Slide 90 text
GHub Prim
Slide 91
Slide 91 text
facr c usab compts
Slide 92
Slide 92 text
SWT! C
Slide 93
Slide 93 text
SWT! C secrs
Slide 94
Slide 94 text
SS powful dgs
Slide 95
Slide 95 text
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; } } } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14
Slide 96
Slide 96 text
button.classy:disabled:hover. mousedown,a.button.classy:dis abled:hover.mousedown,a.butto n.classy.disabled:hover.mouse down...
Slide 97
Slide 97 text
Max 3 vs
Slide 98
Slide 98 text
Wow, w sy
Slide 99
Slide 99 text
NOPE
Slide 100
Slide 100 text
GHub s grown
Slide 101
Slide 101 text
peop who ucd c
Slide 102
Slide 102 text
c vops
Slide 103
Slide 103 text
strat sucks!
Slide 104
Slide 104 text
GHub op like op srce
Slide 105
Slide 105 text
tools GHub’s
Slide 106
Slide 106 text
C Exp
Slide 107
Slide 107 text
“Think of it like SQL EXPLAIN, but for CSS selectors.” - https://github.com/josh/css-explain
Slide 108
Slide 108 text
No content
Slide 109
Slide 109 text
> cssExplain("li .item") { "selector": "li .item", "parts": ["li", ".item"], "specificity": [0, 1, 1], "category": "class", "key": "item", "score": 6 }
Slide 110
Slide 110 text
Webk Dev Tls
Slide 111
Slide 111 text
C Prir
Slide 112
Slide 112 text
No content
Slide 113
Slide 113 text
Time
Slide 114
Slide 114 text
No content
Slide 115
Slide 115 text
Auds
Slide 116
Slide 116 text
No content
Slide 117
Slide 117 text
No content
Slide 118
Slide 118 text
Graphe
Slide 119
Slide 119 text
“Graphite is a highly scalable real-time graphing system.” - http://graphite.wikidot.com/faq
Slide 120
Slide 120 text
cb (backd)
Slide 121
Slide 121 text
“Data collection agents connect to carbon and send their data...” - http://graphite.wikidot.com/carbon
Slide 122
Slide 122 text
whp (DB)
Slide 123
Slide 123 text
“It provides fast, reliable storage of numeric data over time.” - http://graphite.wikidot.com/whisper
Slide 124
Slide 124 text
T Graph S
Slide 125
Slide 125 text
No content
Slide 126
Slide 126 text
Graphs Evyw
Slide 127
Slide 127 text
No content
Slide 128
Slide 128 text
too long; didn’t read J Ron’s
Slide 129
Slide 129 text
Simplifi C
Slide 130
Slide 130 text
Try mimize HTML DOM mcs
Slide 131
Slide 131 text
Refacr use C
Slide 132
Slide 132 text
Tmwk
Slide 133
Slide 133 text
Graph M Evyg
Slide 134
Slide 134 text
Tnk Y @jonrohan You can find this presentation at http://speakerdeck.com/jonrohan