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. 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
  2. 15.
  3. 19.
  4. 43.

                       

                       {    width:  30px; } 1 2 3 .small.private.icon
  5. 44.

                       

                       {    width:  30px; } 1 2 3 .small-­‐private-­‐icon
  6. 47.

                     {  

     width:  30px; } 1 2 3 .foo.bar Iex  m_classRules u  key .foo
  7. 48.

                     {  

     width:  30px; } 1 2 3 .bar.foo Iex  m_classRules u  key .bar
  8. 49.

                       

                             {    width:  30px; } 1 2 3 input[type=text].error Iex  m_tagRules
  9. 50.

                       

                             {    width:  30px; } 1 2 3 input.error[type=text] Iex  m_classRules
  10. 51.

                     {  

     width:  30px; } 1 2 3 .bar#foo Iex  m_classRules
  11. 52.

                     {  

     width:  30px; } 1 2 3 #foo.bar Iex  m_idRules
  12. 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
  13. 65.
  14. 69.
  15. 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
  16. 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>
  17. 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
  18. 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>
  19. 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
  20. 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>
  21. 86.

    January February March April May June July August September October

    November 0 150 300 450 600 pagoad me st 12 ms
  22. 87.

    January February March April May June July August September October

    November 0 150 300 450 600 pagoad me st 12 ms
  23. 88.

    January February March April May June July August September October

    November 0 150 300 450 600 pagoad me st 12 ms
  24. 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
  25. 99.
  26. 107.

    “Think of it like SQL EXPLAIN, but for CSS selectors.”

    - https://github.com/josh/css-explain
  27. 108.
  28. 109.

    >  cssExplain("li  .item") {    "selector":  "li  .item",    "parts":

     ["li",  ".item"],    "specificity":  [0,  1,  1],    "category":  "class",    "key":  "item",    "score":  6 }
  29. 112.
  30. 113.
  31. 114.
  32. 115.
  33. 116.
  34. 117.
  35. 118.
  36. 123.
  37. 125.
  38. 127.
  39. 132.