Your Federal Quarterly Tax Payments are due April 15th Get Help Now >>

CS193H High Performance Web Sites Lecture 24 Vol 2 by bzs12927

VIEWS: 4 PAGES: 15

									          CS193H:
High Performance Web Sites
           Lecture 24:
Vol 2 – CSS Descendant Selectors,
       Forced Compression

           Steve Souders
              Google
      souders@cs.stanford.edu
              announcements
Final exam locations:
  • Dec 9, 12:15-3:15 – Gates B03
  • Dec 12, 12:15-3:15 – Gates B01
                 CSS selectors
ID selector
   #chapter1 { text-align: center }
   element whose ID attribute has the value "chapter1"
class selector
   .pastoral { color: green }
   elements with class=pastoral
type selector
   H1 { font-family: sans-serif }
   all H1 elements in the document tree




http://www.w3.org/TR/CSS2/selector.html
                 (bad) CSS selectors
descendant selector
   H1 EM { color: blue }
   all EM elements anywhere within an H1
child selector
   BODY > P { line-height: 1.3 }
   all P elements whose parent is BODY
adjacent sibling selector
   H1 + 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
                  Writing Efficient CSS
https://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 (?)
                  Writing Efficient CSS
1. avoid universal selectors
2. 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
               Writing Efficient CSS
5. 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 selectors
8. rely on inheritance
   http://www.w3.org/TR/CSS21/propidx.html

https://developer.mozilla.org/en/Writing_Efficient_CSS
by David Hyatt
4/21/2000
                     Testing CSS Performance




20K TD elements

http://jon.sykes.me/152/testing-css-performance-pt-2
                     Testing CSS Performance
20K DIV > P > A elements
no style: control
tag:
    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
                 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_selec
tors#comment_3942
               Where's Accept-Encoding?
5-25% of requests are missing Accept-Encoding
most of these are from browsers that support
compression
Why is Accept-Encoding missing?
  • proxies
     11% of overall requests contain VIA header
     38% of requests missing A-E contain VIA
  • anti-virus software on client
     ACCEPT-ENCODING=gzip, deflate
     ACCEPT_ENCODXNG=gzip, deflate
     _______________=----- -------
                        Compressable content
                             total text      total text     binary
                          (K_compressed) (K_uncompressed)     (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

                                                     December 2008
              Missed opportunity
n = % requests missing A-E but support compression
average 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)/ w1
                 n           s
                 5%          5%
                10%         10%
                15%         14%
                20%         18%
              Solving the problem
force compression
  if User-Agent is known to support compression,
     then return compressed content regardless of A-E
work with vendors
  encourage proxy and anti-virus vendors to support
    compressed content
             Questions
List 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?

								
To top