GitHub's CSS Performance

5 min read Original article ↗

  • Css Performance wh J Ron GHub’s 

  • Tnk y f comg

  • Th talk  abt Pfmce probms  GHub How 

    ce ft C  HTML C/HTML ols  GHub

  • brief about me J Ron’s 

  • Hello, I’m @JonRohan photo by Zachary Kaplan

  • I’m a Dign-gr

  • B.S. Comput Sce

  • 8 yrs  C

  • I’m a GHu

  • photo by @janaboruta

  • Performance woes GHub’s 

  • Slow Scary GitHub

  • Slow Scary GitHub

  • I’m talkg abt diff pag

  • None

  • “a mium size diff”

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

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

  • None

  • 28.16s  calcute sty!

  • Wt caus sty calcung?

  • Mipung  DOM

  • Hidg usg  . display:  none; visibility:  hidden;

  • C Animns

  • Us Acs

  • A   bad ...

  • may cause brows h

  • Something went wrong while displaying this keynote To continue, press

    Reload or go to another talk.

  • trouble css GHub’s 

  • no uecsy tag iifis

  •    #navigation,    .menu  {    margin-­‐left:  0; } 1

    2 3 4 ul ul

  •    #navigation,    .menu  {    margin-­‐left:  0; } 1

    2 3 4

  • no crs

  • html  div  tr  td  {    font-­‐weight:  bold; } 1

    2 3

  • html  div  tr  td  {    font-­‐weight:  bold; } 1

    2 3 td

  • html  div  tr  td  {    font-­‐weight:  bold; } 1

    2 3 tr  td

  • html  div  tr  td  {    font-­‐weight:  bold; } 1

    2 3 html  div  tr  td

  • no univsal secrs

  • *  {    display:  block; } 1 2 3

  • no unqualifi secrs

  • [class^="mini-­‐icon-­‐"]  {    display:  block; } 1 2 3

  • no cg

  •                    

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

  •                    

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

  • r  imptce (wn y do c)

  • webk bug?

  •                  {  

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

  •                  {  

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

  •                    

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

  •                    

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

  •                  {  

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

  •                  {  

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

  • June July August September October November 4700 4875 5050 5225

    5400 numb  c secrs

  • June July August September October November 4700 4875 5050 5225

    5400 numb  c secrs

  • It’s a ve

  • C + HTML

  • HTML overload GHub’s 

  • how much html do we ve?

  • a typical diff le

  • <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

  • avage diffs ve  ~9,0 l

  • >  $('#files_bucket  *').length

  • >  $('#files_bucket  *').length 48917

  • but ’s not a   probm

  • None

  • 15ms pagoad

  • wt c we do?

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

  • None

  • solutions GHub’s 

  • k simp

  • move uecsy html

  • Ki  wh fi

  • <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

  • <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>

  • 6,387 uecsy divs

  • move <a> f le numbs

  • <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

  • <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>

  • Improv Rr spd by 37%

  • <b>S! <b>S!

  • <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

  • <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>

  • 3.5% spd improvemt

  • did  lp?

  • January February March April May June July August September October

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

  • January February March April May June July August September October

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

  • January February March April May June July August September October

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

  • shortcuts GHub’s 

  • GHub Prim

  • facr c  usab compts

  • SWT! C

  • SWT! C secrs

  • SS  powful  dgs

  • 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

  • button.classy:disabled:hover. mousedown,a.button.classy:dis abled:hover.mousedown,a.butto n.classy.disabled:hover.mouse down...

  • Max  3 vs

  • Wow,  w sy

  • NOPE

  • GHub s grown

  • peop who ucd c

  • c vops

  • strat sucks!

  • GHub op like op srce

  • tools GHub’s 

  • C Exp

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

    - https://github.com/josh/css-explain

  • None

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

     ["li",  ".item"],    "specificity":  [0,  1,  1],    "category":  "class",    "key":  "item",    "score":  6 }

  • Webk Dev Tls

  • C Prir

  • None

  • Time

  • None

  • Auds

  • None

  • None

  • Graphe

  • “Graphite is a highly scalable real-time graphing system.” - http://graphite.wikidot.com/faq

  • cb (backd)

  • “Data collection agents connect to carbon and send their data...”

    - http://graphite.wikidot.com/carbon

  • whp (DB)

  • “It provides fast, reliable storage of numeric data over time.”

    - http://graphite.wikidot.com/whisper

  • T Graph S

  • None

  • Graphs Evyw

  • None

  • too long; didn’t read J Ron’s 

  • Simplifi C

  • Try  mimize HTML DOM mcs

  • Refacr  use C

  • Tmwk

  • Graph  M Evyg

  • Tnk Y @jonrohan You can find this presentation at http://speakerdeck.com/jonrohan