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 full-size slide

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. 8 yrs  C

    View full-size slide

  9. I’m a GHu

    View full-size slide

  10. photo by @janaboruta

    View full-size slide

  11. Performance woes
    GHub’s

    View full-size slide

  12. Slow
    Scary
    GitHub

    View full-size slide

  13. Slow
    Scary
    GitHub

    View full-size slide

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

    View full-size slide

  15. “a mium size diff”

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Mipung  DOM

    View full-size slide

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

    View full-size slide

  22. C Animns

    View full-size slide

  23. Us Acs

    View full-size slide

  24. A   bad ...

    View full-size slide

  25. may cause brows h

    View full-size slide

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

    View full-size slide

  27. trouble css
    GHub’s

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. no crs

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  36. no univsal secrs

    View full-size slide

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

    View full-size slide

  38. no unqualifi secrs

    View full-size slide

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

    View full-size slide

  40. no cg

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. webk bug?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  53. It’s a ve

    View full-size slide

  54. HTML overload
    GHub’s

    View full-size slide

  55. how much html do we ve?

    View full-size slide

  56. a typical diff le

    View full-size slide


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

    1
    2
    3
    4
    5
    6
    7
    8

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  62. 15ms pagoad

    View full-size slide

  63. wt c we do?

    View full-size slide

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

    View full-size slide

  65. solutions
    GHub’s

    View full-size slide

  66. k simp

    View full-size slide

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

    View full-size slide

  68. Ki 
    wh fi

    View full-size slide


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

    1
    2
    3
    4
    5
    6
    7
    8

    View full-size slide


  70.    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 full-size slide

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

    View full-size slide

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

    View full-size slide


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

    1
    2
    3
    4
    5
    6
    7
    8

    View full-size slide


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

    1
    2
    3
    4
    5
    6
    7
    8
    5
    7

    View full-size slide

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

    View full-size slide

  76. S! S!

    View full-size slide


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

    1
    2
    3
    4
    5
    6
    7
    8

    View full-size slide


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

    1
    2
    3
    4
    5
    6
    7
    8

    View full-size slide

  79. 3.5% spd improvemt

    View full-size slide

  80. did  lp?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  84. shortcuts
    GHub’s

    View full-size slide

  85. GHub Prim

    View full-size slide

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

    View full-size slide

  87. SWT! C

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  90. 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 full-size slide

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

    View full-size slide

  92. Max  3 vs

    View full-size slide

  93. Wow,  w sy

    View full-size slide

  94. GHub s grown

    View full-size slide

  95. peop who ucd c

    View full-size slide

  96. c vops

    View full-size slide

  97. strat sucks!

    View full-size slide

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

    View full-size slide

  99. tools
    GHub’s

    View full-size slide

  100. C Exp

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  103. Webk Dev Tls

    View full-size slide

  104. C Prir

    View full-size slide

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

    View full-size slide

  106. cb (backd)

    View full-size slide

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

    View full-size slide

  108. whp (DB)

    View full-size slide

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

    View full-size slide

  110. T Graph S

    View full-size slide

  111. Graphs Evyw

    View full-size slide

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

    View full-size slide

  113. Simplifi C

    View full-size slide

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

    View full-size slide

  115. Refacr  use C

    View full-size slide

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

    View full-size slide

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

    View full-size slide