Transcript CS193H: High Performance Web Sites Class 1

CS193H:
High Performance Web Sites
Lecture 11:
Rule 7 – Avoid CSS Expressions
Rule 9 – Reduce DNS Lookups
Steve Souders
Google
[email protected]
Announcements
Aravind and I are grading Rules 1-3 of
"Improving a Top Site" class project now
people who turned in after 11:59pm Mon get
10 points off
CSS expressions
used to set CSS properties dynamically in IE 5-7
fixes IE CSS 2.1 bugs and shortcomings, such as
lack of support for min-width
min-width: 600px;
width: expression(
document.body.clientWidth < 600 ?
“600px” : “auto” );
problem: expressions execute 1000s of times
mouse move, key press, resize, scroll, etc.
http://stevesouders.com/hpws/expressioncounter.php (IE only!)
expression's JavaScript can slow down pages
Alternatives to expressions
expressions are evaluated all the time (mouse
move, etc.), this is what makes them easy but
slow
alternatives are more work but reduce the
amount of JavaScript code executed
alternatives:
• one-time expressions
• event handlers
One-Time Expressions
if an expression only needs to be calculated once,
it can overwrite itself with the value
<style>
#maindiv { min-width: 600px;
width: expression(setW(this));}
</style>
overwrite the
<script type="text/javascript">
expression
function setW(elem) {
elem.style.runtimeStyle.width =
( document.body.clientWidth < 600 ?
"600px" : "auto" );
}
</script>
doesn't handle window resizing
Event Handlers
tie the code to the specific event(s) of interest
<style>
#maindiv { min-width: 600px;
width: expression(setW(this));}
</style>
<script type="text/javascript">
function setW() {
elem=document.getElementById('maindiv');
elem.style.runtimeStyle.width =
( document.body.clientWidth < 600 ?
"600px" : "auto" );
}
window.onresize = setW;
</script>
Expressions in IE8
expressions are no longer supported in IE8
standards mode
reasons:
• standards compliance – issues fixed in IE8
• performance
• security – "reduce browser attack surface"
http://blogs.msdn.com/ie/archive/2008/10/16/endingexpressions.aspx
but we'll still need to deal with IE6&7 for years
to come
DNS Lookups
typically take 20-100ms, sometimes > 500ms
OS and browsers cache DNS resolutions
Viewing DNS
in Windows
C:\>ipconfig /flushdns
Windows IP Configuration
Successfully flushed the DNS Resolver Cache.
C:\>ipconfig /displaydns
Windows IP Configuration
www.google.com
---------------------------------------Record Name . . . . . : www.google.com
Record Type . . . . . : 5
Time To Live . . . . : 43
Data Length . . . . . : 4
Section . . . . . . . : Answer
CNAME Record . . . . : www.l.google.com
TTL (Time to Live)
www.amazon.com
www.aol.com
1 minute
1 minute
www.cnn.com
www.ebay.com
www.google.com
www.msn.com
10 minutes
1 hour
5 minutes
5 minutes
www.myspace.com
www.wikipedia.org
www.yahoo.com
1 hour
1 hour
1 minute
www.youtube.com
5 minutes
TTL < 30 minutes might not impact users
March 2007
Browser DNS Cache
IE 7
• DnsCacheTimeout: 30 minutes
• KeepAliveTimeout: 1 minute
• ServerInfoTimeout: 2 minutes
Firefox 2
•
•
•
•
network.dnsCacheExpiration: 1 minute
network.dnsCacheEntries: 20
network.http.keep-alive.timeout: 5 minutes
Fasterfox: 1 hour, 512 entries, 30 seconds
Reducing DNS Lookups
use Keep-Alive
adding DNS lookups vs. domain sharding
identify dominant domain names, reduce nondominant names
for dominant domains – shard across 2-4
CNAMEs
Homework
read Chapter 8 & 9 of HPWS
Questions
How do CSS expressions affect performance?
What are two workarounds to this problem with
CSS expressions?
How long does a DNS lookup typically take?
What are three places where DNS resolutions are
cached?
What's a TTL? How do OSes and browsers (not)
honor TTLs?
What's the guideline for balancing reducing DNS
lookups and domain sharding?