GitHub's CSS Performance

64827b31aef81498662e8af4bd6d5157?s=47 Jon Rohan
December 05, 2012

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

64827b31aef81498662e8af4bd6d5157?s=128

Jon Rohan

December 05, 2012
Tweet

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

  15. None
  16. “a mium size diff”

  17. ~9,0 l acrs a fis 

  18. ~80%  pagoad  calcung

  19. None
  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

  65. None
  66. 15ms pagoad

  67. wt c we do?

  68. duce  am  mcd html

  69. None
  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
  108. None
  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

  112. None
  113. Time

  114. None
  115. Auds

  116. None
  117. None
  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

  125. None
  126. Graphs Evyw

  127. None
  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