Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (19)
Destaque
Semelhante a 腾讯大讲堂09 如何建设高性能网站
Semelhante a 腾讯大讲堂09 如何建设高性能网站 (20)
Mais de topgeek
Mais de topgeek (20)
Último
Último (20)
腾讯大讲堂09 如何建设高性能网站
- 1. High performance Web Sites richardchang 腾讯技术大讲堂
- 3. 以及这个架构图
- 4. Yahoo’s Case Performance research and 14 rules
- 7. The Importance of Front-End Performance
- 8. Back-end vs. Front-end percentage of time spent on the front-end Empty Cache Full Cache amazon.com 82% 86% aol.com 94% 86% cnn.com 81% 92% ebay.com 98% 92% google.com 86% 64% msn.com 97% 95% myspace.com 96% 86% wikipedia.org 80% 88% yahoo.com 95% 88% youtube.com 97% 95%
- 13. Empty vs. Full Cache 1 user requests www.yahoo.com 2 user requests other web pages 3 user re-requests www.yahoo.com
- 14. Empty vs. Full Cache with an empty cache 1 user requests www.yahoo.com 2 user requests other web pages 3 user re-requests www.yahoo.com
- 15. Empty vs. Full Cache 1 user requests www.yahoo.com 2 user requests other web pages 3 user re-requests www.yahoo.com
- 16. Empty vs. Full Cache Expires header 3 user re-requests www.yahoo.com with a full cache 1 user requests www.yahoo.com 2 user requests other web pages
- 22. Browser Cache Experiment What percentage of users view with an empty cache? # unique users with at least one 200 response total # unique users What percentage of page views are done with an empty cache? total # of 200 responses # of 200 + # of 304 responses } 1 px
- 23. Surprising Results 40-60% ~20% page views with empty cache users with empty cache
- 26. HTTP Quick Review HTTP response header sent by the web server: HTTP/1.1 200 OK Content-Type: text/html; charset=utf-8 Set-Cookie: C=abcdefghijklmnopqrstuvwxyz; domain=.yahoo.com 1 user requests www.yahoo.com
- 27. HTTP Quick Review HTTP request header sent by the browser: GET / HTTP/1.1 Host: finance.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz; 1 user requests www.yahoo.com 2 user requests finance.yahoo.com
- 28. HTTP Quick Review HTTP request header sent by the browser: GET / HTTP/1.1 Host: autos.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz ; 1 user requests www.yahoo.com 3 user requests autos.yahoo.com
- 29. HTTP Quick Review HTTP request header sent by the browser: GET / HTTP/1.1 Host: mail.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz; 1 user requests www.yahoo.com 4 user requests mail.yahoo.com
- 30. HTTP Quick Review HTTP request header sent by the browser: GET / HTTP/1.1 Host: tech.yahoo.com User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; … Cookie: C=abcdefghijklmnopqrstuvwxyz; 1 user requests www.yahoo.com 5 user requests tech.yahoo.com
- 31. Impact of Cookies on Response Time 80 ms delay dialup users Cookie Size Time Delta 0 bytes 78 ms 0 ms 500 bytes 79 ms +1 ms 1000 bytes 94 ms +16 ms 1500 bytes 109 ms +31 ms 2000 bytes 125 ms +47 ms 2500 bytes 141 ms +63 ms 3000 bytes 156 ms +78 ms keep sizes low
- 33. Analysis of Cookie Sizes across the Web Total Cookie Size Amazon 60 bytes Google 72 bytes Yahoo 122 bytes CNN 184 bytes YouTube 218 bytes MSN 268 bytes eBay 331 bytes MySpace 500 bytes
- 36. Parallel Downloads Two components in parallel per hostname HTTP/1.1 GIF GIF GIF GIF GIF GIF
- 37. Parallel Downloads Two in parallel Four in parallel Eight in parallel
- 38. Maximizing Parallel Downloads response time (seconds) aliases
- 39. Maximizing Parallel Downloads response time (seconds) aliases
- 40. Maximizing Parallel Downloads response time (seconds) aliases
- 41. Maximizing Parallel Downloads response time (seconds) rule of thumb: use at least two but no more than four aliases
- 50. Combined Scripts, Combined Stylesheets Scripts Stylesheets amazon.com 3 1 aol.com 18 1 cnn.com 11 2 ebay.com 7 2 froogle.google.com 1 1 msn.com 9 1 myspace.com 2 2 wikipedia.org 3 1 yahoo.com 4 1 youtube.com 7 3 Average 6.5 1.5
- 70. TTL (Time To Live) TTL – how long record can be cached browser settings override TTL www.amazon.com 1 minute www.aol.com 1 minute www.cnn.com 10 minutes www.ebay.com 1 hour www.google.com 5 minutes www.msn.com 5 minutes www.myspace.com 1 hour www.wikipedia.org 1 hour www.yahoo.com 1 minute www.youtube.com 5 minutes
- 73. Rule 10: Minify JavaScript minify inline scripts, too Minify External? Minify Inline? www.amazon.com no no www.aol.com no no www.cnn.com no no www.ebay.com yes no froogle.google.com yes yes www.msn.com yes yes www.myspace.com no no www.wikipedia.org no no www.yahoo.com yes yes www.youtube.com no no
- 74. Minify vs. Obfuscate minify – it's safer http://crockford.com/javascript/jsmin http://dojotoolkit.org/docs/shrinksafe Original JSMin Savings Dojo Savings www.amazon.com 204K 31K (15%) 48K (24%) www.aol.com 44K 4K (10%) 4K (10%) www.cnn.com 98K 19K (20%) 24K (25%) www.myspace.com 88K 23K (27%) 24K (28%) www.wikipedia.org 42K 14K (34%) 16K (38%) www.youtube.com 34K 8K (22%) 10K (29%) Average 85K 17K (21%) 21K (25%)
- 76. Redirects Redirects www.amazon.com no www.aol.com yes – secondary page www.cnn.com yes – initial page www.ebay.com yes – secondary page froogle.google.com no www.msn.com yes – initial page www.myspace.com yes – secondary page www.wikipedia.org yes – secondary page www.yahoo.com yes – secondary page www.youtube.com no
Notas do Editor
- Mysql conf 2005
- Perlbal + memcached, both developed and shared by LJ team
- 用了 packet sniffer 以后，下图显示如果用户没有 cache （ empty cache ）的情况下读取 www.yahoo.com 的情况，可以看到其实只有 5 % 的时间花在了读取最开始的 html 上（ 0.24 ），其他的 90% 时间花在了读取其他组件，例如 image ， css 和 scripts 。
- 我们又对其他大型网站做了测试，发现情况也很类似，大部分的时间都是花在了读取非 html 的其他组件。
- 目前很多常用的性能优化技巧都集中在 html 生成（ generating html ）的部分（ apache ， C++, database ， etc ）但是实际上用户反应时间（ response time ）中只有 20% 是和这一部分相关的，所以我们还是将时间花在另外那 80% 的问题吧。
- 2/8 定律
- 结论：要让用户感觉网页反应最快， full cache 的优势很大
- 有多少比例的用户在看主页的时候是 empty cache 有多少比例的 PV 是在 empty cache 的情况下产生的
- 在 yahoo 的首页增加一个透明的小图 (1x1) ， header 设置成 ” Expires: Thu, 15 Apr 2004 20:00:00 GMT ， Last-Modified: Wed, 28 Sep 2006 23:49:57 GMT“ 。每天跟踪有多少比例的用户请求的这个小图，以及多少比例的 page view 中请求了这个小图 When the browser saves a component in its cache, it also saves the Expires and Last Modified values. Specifying an Expires date in the past forces the browser to request the image every time the page is viewed (with a few exceptions, such as when users click the browser’s “back” button to return to a page).
- 从浏览器返回的 response 应该是 200 （ The browser does not have the image in its cache ）或者 304 （ The browser has the image in its cache, but needs to verify the last modified date ）。
- On the first day of the experiment, no one had these images cached so the empty cache percentage was 100%. As the days passed more users had the images cached, so the percentages dropped until at some point it reached a constant steady state.
- However, we found in our study that regardless of usage patterns, the percentage of page views with an empty cache is always ~20%. empty cache 的用户很可能比你想像中要多得多
- The browser saves the “C” cookie on the user’s computer and sends it back in future requests. The “domain=.yahoo.com” specifies that the browser should include the cookie in future requests within the .yahoo.com domain and all its sub-domains. For example, if the user then visits finance.yahoo.com, the browser includes the “C” cookie in the request. Since an Expires attribute is not included in this example, the cookie expires at the end of the session.
- Cookies 的大小也会对用户的反应时间造成很大影响，
- While the data shows that the majority of page views aren’t impacted by a significant delay, it also shows that about 2% of page views have over 1500 bytes of cookies set at the .yahoo.com domain. Although 2% sounds insignificant, at Yahoo! this translates to millions of page views per day,
- The data in Table 2 reflects only cookies set at the top domain levels to eliminate any cookies that may have been set by ads
- A cookie set at the .yahoo.com domain impacts the response time for every Yahoo! page in the .yahoo.com domain that a user visits. 尽量减少不必要的 cookies 将 cookie 的 size 缩小 将 cookie 放到 domain level 的时候要谨慎小心，尽量不要影响其他的 sub domain 将 expiration date 合理设置
- 既然对最终用户反应时间的最大影响来自与有多少个组件要被请求，为什么不能一次同时将他们下载完呢？主要是因为 http/1.1 的规范，浏览器每次只能同时从单个 hostname 下载两个组件
- 但是如果一个网站将自己的组件平均地分配到两个 hostname 上，就会像下图
- 那么到底是不是将组件分配到越多 hostname 越好呢，我们也做了测试。 The experiment measured an empty HTML document with 20 images on the page. The images were fetched from the same servers as those used by real Yahoo! pages. We ran the experiment in a controlled environment using a test harness that fetches a set of URLs repeatedly while measuring how long it takes to load the page on DSL.
- We fetch 20 smaller-sized images (36 x 36 px) and 20 medium-sized images (116 x 61 px). To our surprise, increasing the number of aliases for loading the medium-size images (116 x 61px) worsens the response times using four or more aliases. Increasing the number of aliases by more than two for smaller-sized images (36 x 36px) doesn’t make much of an impact on the overall response time. On average, using two aliases is best. One possible contributor for slower response times is the amount of CPU thrashing on the client caused by increasing the number of parallel downloads. Another issue to consider is that DNS lookup times vary significantly across ISPs and geographic locations.
- check out this image, used on Yahoo!'s homepage , or this one from Google's .
- serving compressed HTML, CSS, client-side scripts, and any other type of text content. If you make XMLHttpRequests to services that return XML (or JSON, or plain text), make sure your server gzips as well
- There's one gotcha when it comes to serving gzipped content: you must make sure that proxies do not get in your way. If an ISP's proxy caches your gzipped content and serves it to all of its customers, chances are that someone with a browser that doesn't support compression will receive your compressed content. To avoid this you can use the Vary: Accept-Encoding response header to tell the proxy to cache this response only for clients that send the same Accept-Encoding request header.
- due to the nature of the scripts (they could potentially change anything on a page), browsers block all downloads when they encounters a <script> tag. So until a script is downloaded and parsed, no other downloads will be initiated.
- Look out for the Number One