Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GitHub's CSS Performance

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

Jon Rohan

December 05, 2012
Tweet

More Decks by Jon Rohan

Other Decks in Programming

Transcript

  1. Css Performance
    wh J Ron
    GHub’s

    View Slide

  2. Tnk y f comg

    View Slide

  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

    View Slide

  4. brief about me
    J Ron’s

    View Slide

  5. Hello, I’m @JonRohan
    photo by Zachary Kaplan

    View Slide

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

    View Slide

  7. B.S. Comput Sce

    View Slide

  8. 8 yrs  C

    View Slide

  9. I’m a GHu

    View Slide

  10. photo by @janaboruta

    View Slide

  11. Performance woes
    GHub’s

    View Slide

  12. Slow
    Scary
    GitHub

    View Slide

  13. Slow
    Scary
    GitHub

    View Slide

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

    View Slide

  15. View Slide

  16. “a mium size diff”

    View Slide

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

    View Slide

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

    View Slide

  19. View Slide

  20. 28.16s  calcute sty!

    View Slide

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

    View Slide

  22. Mipung  DOM

    View Slide

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

    View Slide

  24. C Animns

    View Slide

  25. Us Acs

    View Slide

  26. A   bad ...

    View Slide

  27. may cause brows h

    View Slide

  28. Something went wrong while displaying this keynote To
    continue, press Reload or go to another talk.

    View Slide

  29. trouble css
    GHub’s

    View Slide

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

    View Slide

  31.    #navigation,
       .menu  {
       margin-­‐left:  0;
    }
    1
    2
    3
    4
    ul
    ul

    View Slide

  32.    #navigation,
       .menu  {
       margin-­‐left:  0;
    }
    1
    2
    3
    4

    View Slide

  33. no crs

    View Slide

  34. html  div  tr  td  {
       font-­‐weight:  bold;
    }
    1
    2
    3

    View Slide

  35. html  div  tr  td  {
       font-­‐weight:  bold;
    }
    1
    2
    3
    td

    View Slide

  36. html  div  tr  td  {
       font-­‐weight:  bold;
    }
    1
    2
    3
    tr  td

    View Slide

  37. html  div  tr  td  {
       font-­‐weight:  bold;
    }
    1
    2
    3
    html  div  tr  td

    View Slide

  38. no univsal secrs

    View Slide

  39. *  {
       display:  block;
    }
    1
    2
    3

    View Slide

  40. no unqualifi secrs

    View Slide

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

    View Slide

  42. no cg

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  46. webk bug?

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  53. June July August September October November
    4700
    4875
    5050
    5225
    5400
    numb  c secrs

    View Slide

  54. June July August September October November
    4700
    4875
    5050
    5225
    5400
    numb  c secrs

    View Slide

  55. It’s a ve

    View Slide

  56. C + HTML

    View Slide

  57. HTML overload
    GHub’s

    View Slide

  58. how much html do we ve?

    View Slide

  59. a typical diff le

    View Slide


  60.    5
       7
       
           
           +  this  is  a  line  in  the  diff
       

    1
    2
    3
    4
    5
    6
    7
    8

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  65. View Slide

  66. 15ms pagoad

    View Slide

  67. wt c we do?

    View Slide

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

    View Slide

  69. View Slide

  70. solutions
    GHub’s

    View Slide

  71. k simp

    View Slide

  72. move uecsy html

    View Slide

  73. Ki 
    wh fi

    View Slide


  74.    5
       7
       
           
           +  this  is  a  line  in  the  diff
       

    1
    2
    3
    4
    5
    6
    7
    8

    View Slide


  75.    5
       7
       
           
           +  this  is  a  line  in  the  diff
       

    1
    2
    3
    4
    5
    6
    7
    8
    +  this  is  a  line  in  the  diff

    View Slide

  76. 6,387 uecsy divs

    View Slide

  77. move f le numbs

    View Slide


  78.    5
       7
       
           
           +  this  is  a  line  in  the  diff
       

    1
    2
    3
    4
    5
    6
    7
    8

    View Slide


  79.    5
       7
       
           
           +  this  is  a  line  in  the  diff
       

    1
    2
    3
    4
    5
    6
    7
    8
    5
    7

    View Slide

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

    View Slide

  81. S! S!

    View Slide


  82.    5
       7
       
           
           +  this  is  a  line  in  the  diff
       

    1
    2
    3
    4
    5
    6
    7
    8

    View Slide


  83.    5
       7
       
           
           +  this  is  a  line  in  the  diff
       

    1
    2
    3
    4
    5
    6
    7
    8

    View Slide

  84. 3.5% spd improvemt

    View Slide

  85. did  lp?

    View Slide

  86. January February March April May June July August September October November
    0
    150
    300
    450
    600
    pagoad me st 12 ms

    View Slide

  87. January February March April May June July August September October November
    0
    150
    300
    450
    600
    pagoad me st 12 ms

    View Slide

  88. January February March April May June July August September October November
    0
    150
    300
    450
    600
    pagoad me st 12 ms

    View Slide

  89. shortcuts
    GHub’s

    View Slide

  90. GHub Prim

    View Slide

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

    View Slide

  92. SWT! C

    View Slide

  93. SWT! C
    secrs

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

  97. Max  3 vs

    View Slide

  98. Wow,  w sy

    View Slide

  99. NOPE

    View Slide

  100. GHub s grown

    View Slide

  101. peop who ucd c

    View Slide

  102. c vops

    View Slide

  103. strat sucks!

    View Slide

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

    View Slide

  105. tools
    GHub’s

    View Slide

  106. C Exp

    View Slide

  107. “Think of it like SQL EXPLAIN, but for CSS selectors.”
    - https://github.com/josh/css-explain

    View Slide

  108. View Slide

  109. >  cssExplain("li  .item")
    {
       "selector":  "li  .item",
       "parts":  ["li",  ".item"],
       "specificity":  [0,  1,  1],
       "category":  "class",
       "key":  "item",
       "score":  6
    }

    View Slide

  110. Webk Dev Tls

    View Slide

  111. C Prir

    View Slide

  112. View Slide

  113. Time

    View Slide

  114. View Slide

  115. Auds

    View Slide

  116. View Slide

  117. View Slide

  118. Graphe

    View Slide

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

    View Slide

  120. cb (backd)

    View Slide

  121. “Data collection agents connect to carbon and send their data...”
    - http://graphite.wikidot.com/carbon

    View Slide

  122. whp (DB)

    View Slide

  123. “It provides fast, reliable storage of numeric data over time.”
    - http://graphite.wikidot.com/whisper

    View Slide

  124. T Graph S

    View Slide

  125. View Slide

  126. Graphs Evyw

    View Slide

  127. View Slide

  128. too long; didn’t read
    J Ron’s

    View Slide

  129. Simplifi C

    View Slide

  130. Try  mimize HTML DOM mcs

    View Slide

  131. Refacr  use C

    View Slide

  132. Tmwk

    View Slide

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

    View Slide

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

    View Slide