GitHub's CSS Performance

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

Transcript

1. Css Performance wh J Ron GHub’s 
2. Tnk y f comg
3. Th talk  abt Pfmce probms  GHub How  ce ft C  HTML C/HTML ols  GHub
4. brief about me J Ron’s 
5. Hello, I’m @JonRohan photo by Zachary Kaplan
6. I’m a Dign-gr
7. B.S. Comput Sce
8. 8 yrs  C
9. I’m a GHu
10. photo by @janaboruta
11. Performance woes GHub’s 
12. Slow Scary GitHub
13. Slow Scary GitHub
14. I’m talkg abt diff pag
16. “a mium size diff”
17. ~9,0 l acrs a fis 
18. ~80%  pagoad  calcung
20. 28.16s  calcute sty!
21. Wt caus sty calcung?
22. Mipung  DOM
23. Hidg usg  . display:  none; visibility:  hidden;
24. C Animns
25. Us Acs
26. A   bad ...
27. may cause brows h
28. Something went wrong while displaying this keynote To continue, press Reload or go to another talk.
29. trouble css GHub’s 
30. no uecsy tag iifis
31.    #navigation,    .menu  {    margin-­‐left:  0; } 1 2 3 4 ul ul
32.    #navigation,    .menu  {    margin-­‐left:  0; } 1 2 3 4
33. no crs
34. html  div  tr  td  {    font-­‐weight:  bold; } 1 2 3
35. html  div  tr  td  {    font-­‐weight:  bold; } 1 2 3 td
36. html  div  tr  td  {    font-­‐weight:  bold; } 1 2 3 tr  td
37. html  div  tr  td  {    font-­‐weight:  bold; } 1 2 3 html  div  tr  td
38. no univsal secrs
39. *  {    display:  block; } 1 2 3
40. no unqualifi secrs
41. [class^="mini-­‐icon-­‐"]  {    display:  block; } 1 2 3
42. no cg
43.                                        {    width:  30px; } 1 2 3 .small.private.icon
44.                                        {    width:  30px; } 1 2 3 .small-­‐private-­‐icon
45. r  imptce (wn y do c)
46. webk bug?
47.                  {    width:  30px; } 1 2 3 .foo.bar Iex  m_classRules u  key .foo
48.                  {    width:  30px; } 1 2 3 .bar.foo Iex  m_classRules u  key .bar
49.                                              {    width:  30px; } 1 2 3 input[type=text].error Iex  m_tagRules
50.                                              {    width:  30px; } 1 2 3 input.error[type=text] Iex  m_classRules
51.                  {    width:  30px; } 1 2 3 .bar#foo Iex  m_classRules
52.                  {    width:  30px; } 1 2 3 #foo.bar Iex  m_idRules
53. June July August September October November 4700 4875 5050 5225 5400 numb  c secrs
54. June July August September October November 4700 4875 5050 5225 5400 numb  c secrs
55. It’s a ve
56. C + HTML
57. HTML overload GHub’s 
58. how much html do we ve?
59. a typical diff le
60. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"  href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre><div>+  this  is  a  line  in  the  diff</div></pre>    </td> </tr> 1 2 3 4 5 6 7 8
61. avage diffs ve  ~9,0 l
62. >  $('#files_bucket  *').length
63. >  $('#files_bucket  *').length 48917
64. but ’s not a   probm
66. 15ms pagoad
67. wt c we do?
68. duce  am  mcd html
70. solutions GHub’s 
71. k simp
72. move uecsy html
73. Ki  wh fi
74. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"  href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre><div>+  this  is  a  line  in  the  diff</div></pre>    </td> </tr> 1 2 3 4 5 6 7 8
75. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"  href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre><div>+  this  is  a  line  in  the  diff</div></pre>    </td> </tr> 1 2 3 4 5 6 7 8 <pre>+  this  is  a  line  in  the  diff</pre>
76. 6,387 uecsy divs
77. move <a> f le numbs
78. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"  href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre>+  this  is  a  line  in  the  diff</pre>    </td> </tr> 1 2 3 4 5 6 7 8
79. <tr>    <td  class="line_number"><a  id="L1L5"  href="#L1L5">5</a></td>    <td  class="line_number"><a  id="L1R7"  href="#L1R7">7</a></td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre>+  this  is  a  line  in  the  diff</pre>    </td> </tr> 1 2 3 4 5 6 7 8 <td  id="L1L5"  class="line_number  linkable-­‐line-­‐numbers">5</td> <td  id="L1R7"  class="line_number  linkable-­‐line-­‐numbers">7</td>
80. Improv Rr spd by 37%
81. <b>S! <b>S!
82. <tr>    <td  id="L1L5"  class="line_number  linkable-­‐line-­‐numbers">5</td>    <td  id="L1R7"  class="line_number  linkable-­‐line-­‐numbers">7</td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre>+  this  is  a  line  in  the  diff</pre>    </td> </tr> 1 2 3 4 5 6 7 8
83. <tr>    <td  id="L1L5"  class="line_number  linkable-­‐line-­‐numbers">5</td>    <td  id="L1R7"  class="line_number  linkable-­‐line-­‐numbers">7</td>    <td  width="100%">        <div  class="add-­‐bubble"></div>        <pre>+  this  is  a  line  in  the  diff</pre>    </td> </tr> 1 2 3 4 5 6 7 8 <b  class="add-­‐bubble"></b>
84. 3.5% spd improvemt
85. did  lp?
86. January February March April May June July August September October November 0 150 300 450 600 pagoad me st 12 ms
87. January February March April May June July August September October November 0 150 300 450 600 pagoad me st 12 ms
88. January February March April May June July August September October November 0 150 300 450 600 pagoad me st 12 ms
89. shortcuts GHub’s 
90. GHub Prim
91. facr c  usab compts
92. SWT! C
93. SWT! C secrs
94. SS  powful  dgs
95. 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
96. button.classy:disabled:hover. mousedown,a.button.classy:dis abled:hover.mousedown,a.butto n.classy.disabled:hover.mouse down...
97. Max  3 vs
98. Wow,  w sy
99. NOPE
100. GHub s grown
101. peop who ucd c
102. c vops
103. strat sucks!
104. GHub op like op srce
105. tools GHub’s 
106. C Exp
107. “Think of it like SQL EXPLAIN, but for CSS selectors.” - https://github.com/josh/css-explain
109. >  cssExplain("li  .item") {    "selector":  "li  .item",    "parts":  ["li",  ".item"],    "specificity":  [0,  1,  1],    "category":  "class",    "key":  "item",    "score":  6 }
110. Webk Dev Tls
111. C Prir
113. Time
115. Auds
118. Graphe
119. “Graphite is a highly scalable real-time graphing system.” - http://graphite.wikidot.com/faq
120. cb (backd)
121. “Data collection agents connect to carbon and send their data...” - http://graphite.wikidot.com/carbon
122. whp (DB)
123. “It provides fast, reliable storage of numeric data over time.” - http://graphite.wikidot.com/whisper
124. T Graph S
126. Graphs Evyw
128. too long; didn’t read J Ron’s 
129. Simplifi C
130. Try  mimize HTML DOM mcs
131. Refacr  use C
132. Tmwk
133. Graph  M Evyg
134. Tnk Y @jonrohan You can find this presentation at http://speakerdeck.com/jonrohan