15
CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google [email protected]

CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google [email protected]

Embed Size (px)

Citation preview

Page 1: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

CS193H:High Performance Web Sites

Lecture 24: Vol 2 – CSS Descendant Selectors,

Forced Compression

Steve SoudersGoogle

[email protected]

Page 2: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

announcementsFinal exam locations:• Dec 9, 12:15-3:15 – Gates B03• Dec 12, 12:15-3:15 – Gates B01

Page 3: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

CSS selectorsID selector

#chapter1 { text-align: center } element whose ID attribute has the value "chapter1"

class selector.pastoral { color: green }elements with class=pastoral

type selectorH1 { font-family: sans-serif }all H1 elements in the document tree

http://www.w3.org/TR/CSS2/selector.html

Page 4: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

(bad) CSS selectorsdescendant selector

H1 EM { color: blue }all EM elements anywhere within an H1

child selectorBODY > P { line-height: 1.3 }all P elements whose parent is BODY

adjacent sibling selectorH1 + DIV { margin-top: -5mm } a DIV that immediately follows an H1

universal selector* {} /* all elements */[hidden="true"] {}all elements where the "hidden" attribute is "true"

http://www.w3.org/TR/CSS2/selector.html

Page 5: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

Writing Efficient CSShttps://developer.mozilla.org/en/Writing_Efficient_CSS

"The style system matches a rule by starting with the rightmost selector and moving to the left through the rule's selectors. As long as your little subtree continues to check out, the style system will continue moving to the left until it either matches the rule or bails out because of a mismatch."

H1 EM { color: blue }find every EM, traverse its ancestors until you find an H1

BODY > P { line-height: 1.3 }find every P, check if its parent is BODY

H1 + DIV { margin-top: -5mm }find every DIV, check if its previous sibling is an H1

all rules are checked on every redraw (?)

Page 6: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

Writing Efficient CSS1. avoid universal selectors2. don't qualify ID selectors• bad: DIV #navbar {}• good: #navbar {}

3. don't qualify class selectors• bad: LI .tight {}• good: .li-tight {}

4. make rules as specific as possible• bad: #navbar A {}• good: .a-navbar {}

https://developer.mozilla.org/en/Writing_Efficient_CSS

Page 7: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

Writing Efficient CSS5. avoid descendant selectors• bad: UL LI A {}• better: UL > LI > A {}

6. avoid tag-child selectors• bad: UL > LI > A {}• best: .li-anchor {}

7. be wary of child selectors8. rely on inheritance

http://www.w3.org/TR/CSS21/propidx.html

https://developer.mozilla.org/en/Writing_Efficient_CSSby David Hyatt4/21/2000

Page 8: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

Testing CSS Performance

20K TD elements

http://jon.sykes.me/152/testing-css-performance-pt-2

Page 9: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

Testing CSS Performance20K DIV > P > A elementsno style: controltag:

A {}

class: .a00001 {}.a20000 {}

descender: DIV DIV DIV P A.a00001 {}

child: DIV > DIV > DIV > P > A.a00001 {}

http://jon.sykes.me/153/more-css-performance-testing-pt-3

Page 10: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

CSS3 selectors (bad)more David Hyatt:

"The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers."

http://shauninman.com/archive/2008/05/05/css_qualified_selectors#comment_3942

Page 11: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

Where's Accept-Encoding?5-25% of requests are missing Accept-Encodingmost of these are from browsers that support compressionWhy is Accept-Encoding missing?• proxies

11% of overall requests contain VIA header38% of requests missing A-E contain VIA

• anti-virus software on clientACCEPT-ENCODING=gzip, deflate

ACCEPT_ENCODXNG=gzip, deflate

_______________=----- -------

Page 12: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

total text (K_compresse

d)

total text (K_uncompress

ed)

binary (K)

aol.com 188 627 228

ebay.com 89 297 145

facebook.com 291 970 344

google.com/search 22 73 19

search.live.com/results 22 73 24

msn.com 95 317 124

myspace.com 256 627 153

en.wikipedia.org/wiki 290 298 810

yahoo.com 118 393 131

youtube.com 122 333 423

average 149 401 240

Compressable content

December 2008

Page 13: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

Missed opportunityn = % requests missing A-E but support compressionaverage page weight with missing A-E:

w1 = (149*(1-n) + 401*n) + 240

average page weight if they had A-E:w2 = 149 + 240

potential savings:s = (w1 - w2)/ w1n s

5% 5%

10% 10%

15% 14%

20% 18%

Page 14: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

Solving the problemforce compression

if User-Agent is known to support compression, then return compressed content regardless of A-E

work with vendorsencourage proxy and anti-virus vendors to support

compressed content

Page 15: CS193H: High Performance Web Sites Lecture 24: Vol 2 – CSS Descendant Selectors, Forced Compression Steve Souders Google souders@cs.stanford.edu

QuestionsList seven types of CSS selectors.What's the key thing to remember about how selectors are applied?What are some techniques for making selector matching faster?