高性能网站最佳实践

5,932 views
5,824 views

Published on

Published in: Technology
7 Comments
47 Likes
Statistics
Notes
No Downloads
Views
Total views
5,932
On SlideShare
0
From Embeds
0
Number of Embeds
1,077
Actions
Shares
0
Downloads
0
Comments
7
Likes
47
Embeds 0
No embeds

No notes for slide

高性能网站最佳实践

  1. 1. 高性能网站最佳实践 <ul><li>技术发展部 刘玉锋 </li></ul>
  2. 2. 课程 课程对象:所有感兴趣的人员 课程目的: 通过此课程,学员能熟悉高性能网站的优化原理, 14 条最佳优化实践的应用范围,熟悉工具的使用,并能网站类项目进行性能上的优化。
  3. 3. 范围 <ul><li>WEB 网站优化包括两个方面 </li></ul><ul><ul><li>后端优化 </li></ul></ul><ul><ul><li>前端优化 </li></ul></ul><ul><li>后端优化包括数据库索引、缓存、负载均衡、集群等技术 </li></ul><ul><li>实际只有 10-20% 的时间耗费在获得 html 文档 ( 后端优化的结果 ) 上 </li></ul><ul><li>剩下的 80-90% 的时间花费在哪里? </li></ul>
  4. 4. 前端优化的重要性
  5. 5. 后端 vs. 前端 <ul><li>前端消耗时间的百分比 </li></ul>95% 97% youtube.com 88% 95% yahoo.com 88% 80% wikipedia.org 86% 96% myspace.com 95% 97% msn.com 64% 86% google.com 92% 98% ebay.com 92% 81% cnn.com 86% 94% aol.com 86% 82% amazon.com Full Cache Empty Cache
  6. 6. 性能黄金法则 <ul><li>80-90% 的页面响应时间集中在前端 . </li></ul><ul><li>有很大的提高潜力 </li></ul><ul><li>简单 </li></ul><ul><li>被证实可行的 </li></ul><ul><li>构建高流量页面 </li></ul><ul><li>改善用户访问体验 </li></ul>
  7. 7. HTTP 协议 <ul><li>HTTP : 超文本传输协议 ( Hypertext Transfer Protocol ) </li></ul><ul><li>HTTP/1.1 是最广泛应用的版本,但存在少数 HTTP/1.0 </li></ul><ul><li>采用了请求 / 响应模型 </li></ul><ul><li>客户端发送的请求包含请求的方法、 URI 、协议版本以及消息体等信息 </li></ul><ul><li>服务器以响应的内容包括消息协议的版本,状态码、消息头和消息体等内容。 </li></ul><ul><li>关于 HTTP 协议的详细内容请参考 RFC2616 </li></ul>
  8. 8. HTTP 协议 <ul><li>条件化的 GET 请求 </li></ul><ul><li>浏览器有缓存,但不确认缓存是否有效 </li></ul><ul><li>浏览器使用 If-Modified-Since 发送请求给服务器端 </li></ul><ul><li>若服务器端无新版本,返回 304 响应(不包含正文) </li></ul>
  9. 9. HTTP 协议 <ul><li>Expires </li></ul><ul><li>条件化 Get 请求还是存在请求和响应 </li></ul><ul><li>Expires 头明确的告诉浏览器什么时候过期 </li></ul><ul><li>过期之前,避免发送任何 HTTP 请求 </li></ul>
  10. 10. 80/20 性能法则 <ul><li>帕累托法则 : </li></ul><ul><li>20% 的精力获得 80% 回报 </li></ul><ul><li>集中在能影响 80% 响应时间的 20% 的问题上 </li></ul><ul><li>那就是前端 </li></ul>
  11. 11. Empty vs. Full Cache 1 用户请求 www.yahoo.com 2 用户请求其他页面 3 用户再次请求 www.yahoo.com
  12. 12. Empty vs. Full Cache with an empty cache 1 用户请求 www.yahoo.com 2 user requests other web pages 3 user re-requests www.yahoo.com
  13. 13. Empty vs. Full Cache 1 用户请求 www.yahoo.com 2 用户请求其他页面 3 用户再次请求 www.yahoo.com
  14. 14. Empty vs. Full Cache Expires header 3 用户再次请求 www.yahoo.com with a full cache 1 用户请求 www.yahoo.com 2 用户请求其他页面
  15. 15. Empty vs. Full Cache <ul><li> empty cache </li></ul><ul><li>2.4 秒 </li></ul><ul><li> full cache </li></ul><ul><li>0.9 秒 </li></ul><ul><li>节省了 83% 的流量大小 </li></ul><ul><li>节省了 90% 的 HTTP 请求 </li></ul>
  16. 16. 浏览器 cache 实验
  17. 17. 浏览器 cache 实验 <ul><li>浏览器请求响应会包括下列 http 响应头 : </li></ul><ul><li>200 – 浏览器没有图片缓存 . </li></ul><ul><ul><li>304 – 浏览器有缓存,但是需要验证最后修改时间 . </li></ul></ul>
  18. 18. 浏览器 cache 实验 40-60% ~20% page views with empty cache users with empty cache
  19. 19. 浏览器 cache 实验 <ul><li>注意 empty cache 用户的体验 </li></ul><ul><li>使用不同的技术优化 full 、 empty cache 的用户体验 </li></ul>
  20. 20. 并行下载 两个组件 in parallel per hostname HTTP/1.1 GIF GIF GIF GIF GIF GIF
  21. 21. 并行下载 <ul><li>2 个组件并行 </li></ul><ul><li>4 个组件并行 </li></ul><ul><li>8 个组件并行 </li></ul>
  22. 22. 最大化并行下载 响应时间 (seconds) 主机名
  23. 23. 最大化并行下载 响应时间 (seconds) 规则:使用 2 个最多不超过 4 个的 主机名
  24. 24. 总结 <ul><li>80/20 法则告诉我们减少 Http 请求 </li></ul><ul><li>http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ </li></ul><ul><li>浏览器 Cache 机制 ! </li></ul><ul><li>http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ </li></ul><ul><li>最大化并行下载 </li></ul><ul><li>http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ </li></ul>
  25. 25. 14 条最佳实践 <ul><li>规则 1—— 减少 HTTP 请求 </li></ul><ul><li>规则 2—— 使用内容发布网络 </li></ul><ul><li>规则 3—— 添加 Expires 头 </li></ul><ul><li>规则 4—— 压缩组件 </li></ul><ul><li>规则 5—— 将样式表放在顶部 </li></ul><ul><li>规则 6—— 将脚本放在底部 </li></ul><ul><li>规则 7—— 避免 CSS 表达式 </li></ul><ul><li>规则 8—— 使用外部脚本和 CSS </li></ul><ul><li>规则 9—— 减少 DNS 查找 </li></ul><ul><li>规则 10—— 精简 JavaScript </li></ul><ul><li>规则 11—— 避免重定向 </li></ul><ul><li>规则 12—— 移出重复脚本 </li></ul><ul><li>规则 13—— 配置 ETag </li></ul><ul><li>规则 14—— 使 AJAX 可缓存 </li></ul>来源于 Yahoo 研发团队在优化网络访问时积累下来的最佳实践
  26. 26. 规则 1: 减少 Http 请求 <ul><li>图片地图 (Image maps) </li></ul><ul><li>CSS sprites </li></ul><ul><li>内联图片 (inline images) </li></ul><ul><li>合并 Script ,合并 CSS </li></ul>
  27. 27. 图片地图 <ul><li>服务端 </li></ul><ul><li><a href=&quot;navbar.cgi&quot;><img ismap src=&quot;imagemap.gif&quot;></a> </li></ul><ul><li>-> http://.../navbar.cgi?127,13 </li></ul><ul><li>客户端 – 推荐 </li></ul><ul><li><img usemap=&quot;#map1&quot; border=0 src=&quot;/images/imagemap.gif&quot;> </li></ul><ul><li><map name=&quot;map1&quot;> </li></ul><ul><li><area shape=&quot;rect&quot; coords=&quot;0,0,31,31&quot; href=&quot;home.html&quot; title=&quot;Home&quot;> </li></ul><ul><li>… </li></ul><ul><li></map> </li></ul><ul><li>缺点 : </li></ul><ul><ul><li>定义区域坐标容易出错 </li></ul></ul><ul><ul><li>图片必须是连续的 </li></ul></ul>http://www.w3.org/TR/html401/struct/objects.html#h-13.6
  28. 28. CSS Sprites – 推荐 <ul><li>合并图片的文件尺寸很小 </li></ul><ul><li>Opera 6 不支持 </li></ul>http://alistapart.com/articles/sprites <span style=&quot; background-image: url('sprites.gif'); background-position: -260px -90px;“ width:26px; height:24px;> </span>
  29. 29. 内联图片 <ul><li>data: URL scheme </li></ul><ul><ul><li>data:[<mediatype>][;base64],<data> </li></ul></ul><ul><li><IMG ALT=”Red Star” </li></ul><ul><li>SRC=&quot;data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBLQRFIJAIKywRgmhwAIlEEADs=&quot;> </li></ul><ul><li>IE 不支持 </li></ul><ul><li>避免增加 HTML 页面大小 </li></ul><ul><ul><li>可放在缓存的 stylesheets 中 </li></ul></ul>http://tools.ietf.org/html/rfc2397
  30. 30. 合并脚本,合并样式表 3 7 youtube.com 1.5 6.5 Average 1 4 yahoo.com 1 3 wikipedia.org 2 2 myspace.com 1 9 msn.com 1 1 froogle.google.com 2 7 ebay.com 2 11 cnn.com 1 18 aol.com 1 3 amazon.com Stylesheets Scripts
  31. 31. 合并脚本,合并样式表 <ul><li>合并六个脚本为 1 个可以减少 5 次 HTTP 请求 </li></ul><ul><li>挑战 : </li></ul><ul><ul><li>脚本开发时候是模块化开发 </li></ul></ul><ul><ul><li>多个脚本文件组合的可能性非常多 </li></ul></ul><ul><ul><li>加载比需要更多的脚本 </li></ul></ul><ul><li>解决方案 : </li></ul><ul><ul><li>保持脚本模块化 </li></ul></ul>
  32. 32. 规则 2: 使用 CDN <ul><li>CDN 是一个经策略性部署的整体系统,能够帮助用户解决分布式存储、负载均衡、网络请求的重定向和内容管理等问题。 </li></ul><ul><li>在现有的 Internet 中增加一层新的网络架构,将网站的内容发布到最接近用户的网络“边缘”,使用户可以就近取得所需的内容,解决  Internet  网络拥塞状况,提高用户访问网站的响应速度。 </li></ul><ul><li>通过用户就近性和服务器负载的判断, CDN 确保内容以一种极为高效的方式为用户的请求提供服务。 </li></ul><ul><li>采用 CDN 技术,能处理整个网站页面的 70% ~ 95% 的内容访问量,减轻服务器的压力,提升了网站的性能和可扩展性。 </li></ul><ul><li>CDN 适用于发布静态内容,如图片、脚本、视频等 </li></ul>
  33. 33. 规则 2: 使用 CDN <ul><li>传统的 Internet 网络的基本结构和数据传输情况 </li></ul>
  34. 34. 规则 2: 使用 CDN <ul><li>存在的问题 </li></ul><ul><li>DNS 解析过程不判断服务器状况 </li></ul><ul><li>不同网络间的兼容以及不同网络运营商 /ISP 之间的传输瓶颈 ,现有互联网上的平均传输速率不高于 30Kbps 。 </li></ul><ul><li>现有的互联网以数据包传输为基础,任何一个数据包的丢失或出错都必须重新发送,而平均一个重传过程需要 3 秒钟,从而导致延迟 </li></ul><ul><li>现有的路由技术以路由器工作状态的历史数据为依据来确定当前数据包的传输路径,无法真实反应当前的路由和网络连接状况。 </li></ul>
  35. 35. 规则 2: 使用 CDN <ul><li>CDN 优化作用原理示意图 </li></ul>
  36. 36. 规则 2: 使用 CDN <ul><li>CDN 对网络的优化作用 </li></ul><ul><li>在精心挑选的网络各处放置节点服务器,从而将网站的内容放置到离用户最近的地方 </li></ul><ul><li>缓解甚至消除了不同运营商之间互联的瓶颈造成的影响 </li></ul><ul><li>减轻了各省的出口带宽压力 </li></ul><ul><li>缓解了骨干网的压力 </li></ul><ul><li>优化了网上热点内容的分布 </li></ul>
  37. 37. 规则 2: 使用 CDN youtube.com Akamai yahoo.com wikipedia.org Akamai, Limelight myspace.com SAVVIS msn.com google.com Akamai, Mirror Image ebay.com cnn.com Akamai aol.com Akamai amazon.com
  38. 38. 规则 2: 使用 CDN <ul><li>国内主要 CDN 服务商 </li></ul><ul><li>蓝芒科技( www.lanmang.com ) </li></ul><ul><li>网宿( www.chinanetcenter.com ) </li></ul><ul><li>蓝汛( www.chinacache.com ) </li></ul><ul><li>帝联科技( www.dnion.com ) </li></ul>CDN 通常按其带宽和流量收费
  39. 39. 规则 3 :添加 Expires 头 <ul><li>Expires 头 </li></ul><ul><li>设置一个指定的过期时间,通过浏览器缓存减少 http 请求次数及 http 响应大小 </li></ul>
  40. 40. 规则 3 :添加 Expires 头 <ul><li>Max-Age </li></ul><ul><li>http1.1 引入,避免 Expire 引起的服务器客户端时间不同步问题 </li></ul><ul><li>使用 max-age 标签指定过期的时间长度 </li></ul>
  41. 41. 规则 3 :添加 Expires 头 <ul><li>mod_expires </li></ul><ul><li>Apache 的模块用于设置 Expires 头和 max-age 头,解决 HTTP 1.1/1.0 的兼容问题 </li></ul><ul><li>max-age 优先于 Expires 头 </li></ul>
  42. 42. 规则 3 :添加 Expires 头 <ul><li>并不仅仅是图片 </li></ul>26 days 0% 0/7 0/3 0/32 youtube.com 100% 75% 0% 80% 4% 55% 1% 48% 0% % n/a 4/4 1/1 23/23 yahoo.com 1 day 2/3 1/1 6/8 wikipedia.org 1 day 0/2 0/2 0/18 myspace.com 34 days 3/9 1/1 32/35 msn.com 454 days 0/1 0/1 1/23 froogle.google.com 140 days 0/7 0/2 16/20 ebay.com 227 days 2/11 0/2 0/138 cnn.com 217 days 6/18 1/1 23/43 aol.com 114 days 0/3 0/1 0/62 amazon.com Median Age Scripts Stylesheets Images
  43. 43. 规则 3 :添加 Expires 头 <ul><li>如何保证用户获得最新的页面组件? </li></ul>修改所有页面中的页面组件的文件名; 文件名采用变量的方式; 文件命名可采用文件名 + 版本号的方式,如 yahoo_2.0.6.js ;
  44. 44. 规则 4: 压缩组件 <ul><li>可以影响用户的下载时间 </li></ul><ul><li>90% 以上的浏览器支持组件压缩 </li></ul>
  45. 45. Gzip vs. Deflate <ul><li>Gzip 压缩的更多 </li></ul><ul><li>Gzip 被更广泛的浏览器支持 </li></ul>Deflate Gzip 67% 4.7K 73% 3.7K 14.1K Stylesheet 52% 0.5K 56% 0.4K 1.0K Stylesheet 58% 16.6K 64% 14.5K 39.7K Script 66% 1.1K 67% 1.1K 3.3K Script Savings Size Savings Size Size
  46. 46. Gzip: 并不仅仅适用 HTML <ul><li>gzip scripts, stylesheets, XML, JSON ( 不适用于 images, PDF) </li></ul>some some x youtube.com x x x yahoo.com x x x wikipedia.org x x x myspace.com deflate deflate x msn.com x x x froogle.google.com x ebay.com cnn.com some some x aol.com x amazon.com Stylesheets Scripts HTML
  47. 47. Gzip 配置 <ul><li>Apache 2.x: mod_deflate </li></ul><ul><ul><li>AddOutputFilterByType DEFLATE text/html text/css application/x-javascript </li></ul></ul><ul><li>HTTP request </li></ul><ul><ul><li>Accept-Encoding: gzip, deflate </li></ul></ul><ul><li>HTTP response </li></ul><ul><ul><li>Content-Encoding: gzip </li></ul></ul><ul><ul><li>Vary: Accept-Encoding </li></ul></ul>适用于代理服务器
  48. 48. Gzip 边缘情形 <ul><li><1% 浏览器不能处理 gzip </li></ul><ul><ul><li>IE 5.5: </li></ul></ul><ul><ul><li>http://support.microsoft.com/default.aspx?scid=kb;en-us;Q313712 </li></ul></ul><ul><ul><li>IE 6.0: </li></ul></ul><ul><ul><li>http://support.microsoft.com/default.aspx?scid=kb;en-us;Q31249 </li></ul></ul><ul><ul><li>Netscape 3.x, 4.x </li></ul></ul><ul><ul><li>http://www.schroepl.net/projekte/mod_gzip/browser.htm </li></ul></ul><ul><li>Apache2.x 使用 BrowserMatch 解决 </li></ul><ul><li>BrowseMatch ^MSIE [6-9] gzip </li></ul><ul><li>BrowseMatch ^Mozilla [5-9] gzip </li></ul><ul><li>对于代理服务器来说,考虑增加 Cache-Control: Private 禁止代理缓存 </li></ul>
  49. 49. 规则 5: 将样式表放在顶部 <ul><li>样式表阻止 IE 的呈现 ( 白屏 ) </li></ul><ul><ul><li>http://stevesouders.com/examples/css-bottom.php </li></ul></ul><ul><li>解决方法 : 样式表放在顶部 HEAD </li></ul><ul><li>使用 LINK ( 不要用 @import ,会导致下载无序性 ) </li></ul>
  50. 50. 下载慢的感觉快
  51. 51. 规则 6: 将脚本放在底部 <ul><li>脚本阻止了跨多个主机名的并发下载 </li></ul><ul><li>脚本阻止了在它之下的页面部分的呈现 </li></ul><ul><li>IE and FF </li></ul><ul><ul><li>http://stevesouders.com/examples/js-middle.php </li></ul></ul>
  52. 52. 规则 6: 将脚本放在底部 <ul><li>script defer 属性不是最好的解决方案 </li></ul><ul><ul><li>FF 浏览器中阻止了下载和呈现 </li></ul></ul><ul><li>解决方法 : 将脚本移动到页面的最底部 </li></ul>
  53. 53. 规则 7: 避免 CSS 表达式 <ul><li>在 IE 中动态设置 CSS 属性 </li></ul><ul><ul><li>width: expression( </li></ul></ul><ul><ul><li>document.body.clientWidth < 600 ? </li></ul></ul><ul><ul><li>“ 600px” : “auto” ); </li></ul></ul><ul><li>问题 : 表达式被执行了很多次 </li></ul><ul><ul><li>mouse move, key press, resize, scroll, etc. </li></ul></ul><ul><li>http://stevesouders.com/examples/expression-counter.php </li></ul>
  54. 54. 一次性的表达式 <ul><li>重写之后的表达式 </li></ul><ul><li><style> </li></ul><ul><li>P { </li></ul><ul><li>background-color: expression(altBgcolor(this)); </li></ul><ul><li>} </li></ul><ul><li></style> </li></ul><ul><li><script> </li></ul><ul><li>function altBgcolor(elem) { </li></ul><ul><li>elem.style.backgroundColor = (new Date()).getHours()%2 ? &quot;#F08A00&quot; : &quot;#B8D4FF&quot;; </li></ul><ul><li>} </li></ul><ul><li></script> </li></ul>
  55. 55. 事件处理器 <ul><li>行为绑定在特定的事件上 </li></ul><ul><li>window.onresize = setMinWidth; </li></ul><ul><li>function setMinWidth() { </li></ul><ul><li>var aElements = </li></ul><ul><li>document.getElementsByTagName(&quot;p&quot;); </li></ul><ul><li>for ( var i = 0; i < aElements.length; i++ ) { </li></ul><ul><li>aElements[i].runtimeStyle.width = ( </li></ul><ul><li>document.body.clientWidth<600 ? </li></ul><ul><li>&quot;600px&quot; : &quot;auto&quot; ); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul>
  56. 56. 规则 8: 使用外部脚本和 CSS <ul><li>内联 : HTML 文档很大 </li></ul><ul><li>外部 : 更多的 HTTP 请求,但是可以缓存 </li></ul><ul><li>影响因素 </li></ul><ul><ul><li>每个用户的页面访问数量 </li></ul></ul><ul><ul><li>( 缓存后随着页面查看次数的增长而增长 ) </li></ul></ul><ul><ul><li>空缓存 vs. 完整缓存 </li></ul></ul><ul><ul><li>( 具备完整缓存的页面查看数量占 75-85%) </li></ul></ul><ul><ul><li>组件重用 </li></ul></ul><ul><ul><li>( 多个页面使用相同的 js 和 css) </li></ul></ul><ul><li>外部文件更好 </li></ul><ul><ul><li>首页是一个例外 </li></ul></ul>
  57. 57. 加载后下载 <ul><li>主页使用内联方式 </li></ul><ul><li>Onload 之后再下载外部文件 </li></ul><ul><ul><li>window.onload = downloadComponents; </li></ul></ul><ul><ul><li>function downloadComponents() { </li></ul></ul><ul><ul><li>var elem = document.createElement(&quot;script&quot;); </li></ul></ul><ul><ul><li>elem.src = &quot;http://.../file1.js&quot;; </li></ul></ul><ul><ul><li>document.body.appendChild(elem); </li></ul></ul><ul><ul><li>... </li></ul></ul><ul><ul><li>} </li></ul></ul><ul><li>可以加速之后的页面访问 </li></ul>
  58. 58. 动态内联 <ul><li>使用加载后下载技术 </li></ul><ul><li>组件下载完后设置 cookie </li></ul><ul><li>服务端 : </li></ul><ul><ul><li>如果客户端有 cookie ,则使用外部文件 </li></ul></ul><ul><ul><li>否则使用内联方式同加载后下载技术 </li></ul></ul>
  59. 59. 规则 9: 减少 DNS 查找 <ul><li>通常 20-120 ms </li></ul><ul><li>阻止了并行下载 </li></ul><ul><li>操作系统和浏览器具备 DNS 缓存 </li></ul>
  60. 60. TTL (Time To Live) <ul><li>TTL – 记录缓存多长时间 </li></ul><ul><li>浏览器的设置会覆盖 TTL </li></ul>5 minutes www.youtube.com 1 minute www.yahoo.com 1 hour www.wikipedia.org 1 hour www.myspace.com 5 minutes www.msn.com 5 minutes www.google.com 1 hour www.ebay.com 10 minutes www.cnn.com 1 minute www.aol.com 1 minute www.amazon.com
  61. 61. 浏览器 DNS 缓存 <ul><li>IE </li></ul><ul><ul><li>DnsCacheTimeout: 30 minutes </li></ul></ul><ul><ul><li>KeepAliveTimeout: 1 minute </li></ul></ul><ul><ul><li>ServerInfoTimeout: 2 minutes </li></ul></ul><ul><li>Firefox </li></ul><ul><ul><li>network.dnsCacheExpiration: 1 minute </li></ul></ul><ul><ul><li>network.dnsCacheEntries: 20 </li></ul></ul><ul><ul><li>network.http.keep-alive.timeout: 5 minutes </li></ul></ul><ul><ul><li>Fasterfox 插件 : 1 hour, 512 entries, 30 seconds </li></ul></ul>
  62. 62. 减少 DNS 查找 <ul><li>更少的主机名 – 2-4 </li></ul><ul><li>keep-alive </li></ul>
  63. 63. 规则 10: 精简 JavaScript <ul><li>内联脚本也需要精简 </li></ul>no yes no no yes yes yes no no no 精简外部脚本 ? no www.youtube.com yes www.yahoo.com no www.wikipedia.org no www.myspace.com yes www.msn.com yes froogle.google.com no www.ebay.com no www.cnn.com no www.aol.com no www.amazon.com 精简内联脚本 ?
  64. 64. 精简 vs. 混淆 原始 JavaScript //this is a test javascript YAHOO.util.CustomEvent = function(type, oScope, silent, signature) { this.type = type; this.scope = oScope || window; this.silent = silent; this.signature = signature || YAHOO.util.CustomEvent.LIST; this.subscribers = []; if (!this.silent) { } var onsubscribeType = &quot;_YUICEOnSubscribe&quot;; if (type !== onsubscribeType) { this.subscribeEvent = new YAHOO.util.CustomEvent(onsubscribeType, this, true); } };
  65. 65. 精简 vs. 混淆 精简后的 JavaScript YAHOO.util.CustomEvent=function(type,oScope,silent,signature){this.type=type;this. scope=oScope||window;this.silent=silent;this.signature=signature||YAHOO.util. CustomEvent.LIST;this.subscribers=[];if(!this.silent){} var onsubscribeType=&quot;_YUICEOnSubscribe&quot;;if(type!==onsubscribeType){this.subscribeEv ent=new YAHOO.util.CustomEvent(onsubscribeType,this,true);}};
  66. 66. 精简 vs. 混淆 混淆后的 JavaScript YAHOO.util.CustomEvent=function (_1,_2,_3,_4){ this.type=_1; this.scope=_2||window; this.silent=_3; this.signature=_4||YAHOO.util.CustomEvent.LIST; this.subscribers=[]; if(!this.silent){ } var _5=&quot;_YUICEOnSubscribe&quot;; if(_1!==_5){ this.subscribeEvent=new YAHOO.util.CustomEvent(_5,this,true); } };
  67. 67. 精简 vs. 混淆 <ul><li>精简 – 更安全 </li></ul><ul><li>http://crockford.com/javascript/jsmin </li></ul><ul><li>http://dojotoolkit.org/docs/shrinksafe </li></ul>Dojo 节省 JSMin 节省 原始大小 21K (25%) 17K (21%) 85K Average 10K (29%) 8K (22%) 34K www.youtube.com 16K (38%) 14K (34%) 42K www.wikipedia.org 24K (28%) 23K (27%) 88K www.myspace.com 24K (25%) 19K (20%) 98K www.cnn.com 4K (10%) 4K (10%) 44K www.aol.com 48K (24%) 31K (15%) 204K www.amazon.com
  68. 68. 精简 vs. 混淆 总结 <ul><li>85k js 原始大小 </li></ul><ul><li>68k 只进行 jsmin 压缩的 ( 节省 21%) </li></ul><ul><li>23k 只进行 gzip 压缩的 ( 节省 73%) </li></ul><ul><li>19k 进行 gzip&jsmin 压缩的 ( 节省 78%) </li></ul>
  69. 69. 规则 11: 避免重定向 <ul><li>3xx 状态码 – 最常用的 301 和 302 </li></ul><ul><ul><li>HTTP/1.1 301 Moved Permanently </li></ul></ul><ul><ul><li>Location: http://stevesouders.com/newuri </li></ul></ul><ul><li>增加 Expires 头缓存重定向 </li></ul><ul><li>阻止其他下载 </li></ul><ul><li>http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html </li></ul>
  70. 70. 重定向 no yes – secondary page yes – secondary page yes – secondary page yes – initial page no yes – secondary page yes – initial page yes – secondary page no 重定向 www.youtube.com www.yahoo.com www.wikipedia.org www.myspace.com www.msn.com froogle.google.com www.ebay.com www.cnn.com www.aol.com www.amazon.com
  71. 71. 避免重定向 <ul><li>缺少结尾的斜线 </li></ul><ul><ul><li>http://www.chinaunicache.com/zh-CN/2008 </li></ul></ul><ul><ul><li>使用 Alias 或者 DirectorySlash </li></ul></ul><ul><li>mod_rewrite </li></ul>
  72. 72. 规则 12: 移除重复脚本 <ul><li>影响性能 </li></ul><ul><ul><li>不必要的 HTTP 请求 (IE only) </li></ul></ul><ul><ul><li>执行脚本浪费的时间 </li></ul></ul><ul><li>测试结果 </li></ul><ul><ul><li>10 个顶级网站的 2 个包含重复脚本 </li></ul></ul><ul><li>形成原因 </li></ul><ul><li>- 团队数量 , 脚本数量 </li></ul>
  73. 73. 避免重复脚本 <ul><li><?php </li></ul><ul><li>function insertScript($jsfile) { </li></ul><ul><li>if ( alreadyInserted($jsfile) ) { return; } </li></ul><ul><li>pushInserted($jsfile); </li></ul><ul><li>if ( hasDependencies($jsfile) ) { </li></ul><ul><li>$dependencies = getDependencies($jsfile); </li></ul><ul><li>for ( $i = 0; $i < count($dependencies); $i++ ) { </li></ul><ul><li>insertScript($dependencies[$i]); </li></ul><ul><li>} </li></ul><ul><li>} </li></ul><ul><li>echo '<script type=&quot;text/javascript&quot; src=&quot;' . </li></ul><ul><li>getVersion($jsfile) . '&quot;></script>&quot;; </li></ul><ul><li>} </li></ul><ul><li>?> </li></ul>
  74. 74. 规则 13: 配置 ETag <ul><li>响应中返回的唯一标志 </li></ul><ul><ul><li>ETag: &quot;c8897e-aee-4165acf0&quot; </li></ul></ul><ul><ul><li>Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT </li></ul></ul><ul><li>在条件化的 GET 请求中 </li></ul><ul><ul><li>If-None-Match: &quot;c8897e-aee-4165acf0&quot; </li></ul></ul><ul><ul><li>If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT </li></ul></ul><ul><li>若 ETag 不匹配,不会发送 304 </li></ul>
  75. 75. ETags 的问题 <ul><li>ETag 对同一个对象在不同的服务器上取值不一样 </li></ul><ul><li>ETag 格式 </li></ul><ul><ul><li>Apache: inode -size-timestamp </li></ul></ul><ul><ul><li>IIS: Filetimestamp: ChangeNumber </li></ul></ul><ul><li>多于一个服务器的站点返回很少的 304s </li></ul><ul><ul><li>(n-1)/n </li></ul></ul><ul><li>移除 ETag </li></ul><ul><ul><li>Apache: FileETag none </li></ul></ul><ul><ul><li>IIS: http://support.microsoft.com/kb/922703/ </li></ul></ul>
  76. 76. 规则 14: 使 AJAX 可缓存 <ul><li>XHR, JSON, iframe, dynamic scripts 也可以被缓存 , 精简和 gzip 压缩 </li></ul><ul><li>个性化的响应也是可以缓存的 </li></ul><ul><li>/ws/mail/formrpc?m=GetMessage&yid=steve </li></ul>
  77. 77. 其它网站 YSlow 得分情况 前面删除了部分页面,一些公司的案例。 C(79) 豆瓣 D(66) 51.com F(31) 当当 F(40) MSN B(86) Yahoo F(36) 卓越亚马逊 A(91) 百度 A(93) Google D(64) 淘宝 F(26) 新浪 等级 网站
  78. 78. HttpWatch <ul><li>基于 IE 的 HTTP 查看器 </li></ul><ul><li>查看 headers, cookies, caching 和 POST 数据 </li></ul><ul><li>图形方式展示页面组件下载情况 </li></ul><ul><li>按页面对日志记录分组 </li></ul><ul><li>能解密 HTTPS 信息 </li></ul><ul><li>5.x 专业版售价 $ 295 </li></ul><ul><li>http://httpwatch.com/ </li></ul>
  79. 79. <ul><li>http://alphaworks.ibm.com/tech/pagedetailer </li></ul>
  80. 80. Firebug <ul><li>Web 开发调试工具 </li></ul><ul><li>查看和修改 HTML </li></ul><ul><li>调整 CSS </li></ul><ul><li>调制和执行 JavaScript </li></ul><ul><li>监测网络活动 </li></ul><ul><li>Firefox 插件 </li></ul><ul><li>http://getfirebug.com/ </li></ul>
  81. 82. YSlow <ul><li>性能分析工具 </li></ul><ul><li>对页面针对每个规则打分 </li></ul><ul><li>Firefox 插件 </li></ul><ul><li>Yahoo! 的内部工具 </li></ul><ul><li>http://developer.yahoo.com/yslow/ </li></ul>
  82. 84. 相关链接 <ul><li>book: http://www.oreilly.com/catalog/9780596514211/ </li></ul><ul><li>examples: http://stevesouders.com/examples/ </li></ul><ul><li>image maps: http://www.w3.org/TR/html401/struct/objects.html#h-13.6 </li></ul><ul><li>CSS sprites: http://alistapart.com/articles/sprites </li></ul><ul><li>inline images: http://tools.ietf.org/html/rfc2397 </li></ul><ul><li>jsmin: http://crockford.com/javascript/jsmin </li></ul><ul><li>dojo compressor: http://dojotoolkit.org/docs/shrinksafe </li></ul><ul><li>HTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html </li></ul><ul><li>IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer </li></ul><ul><li>Fasterfox: http://fasterfox.mozdev.org/ </li></ul><ul><li>LiveHTTPHeaders: http://livehttpheaders.mozdev.org/ </li></ul><ul><li>Firebug: http://getfirebug.com/ </li></ul><ul><li>YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ </li></ul><ul><li>http://yuiblog.com/blog/2007/01/04/performance-research-part-2/ </li></ul><ul><li>http://yuiblog.com/blog/2007/03/01/performance-research-part-3/ </li></ul><ul><li>http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ </li></ul><ul><li>YDN: http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html </li></ul><ul><li>http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html </li></ul><ul><li>蓝汛( www.chinacache.com ) </li></ul><ul><li>帝联科技( www.dnion.com ) </li></ul>
  83. 85. 推荐图书
  84. 86. 谢谢大家! <ul><li>Thanks & Questions </li></ul>

×