GitHub's CSS Performance

Jon Rohan

December 05, 2012

Tweet Share

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