高性能网站最佳实践

高性能网站最佳实践 ,[object Object]

课程课程对象：所有感兴趣的人员课程目的：通过此课程，学员能熟悉高性能网站的优化原理， 14 条最佳优化实践的应用范围，熟悉工具的使用，并能网站类项目进行性能上的优化。

范围 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

后端 vs. 前端 ,[object Object],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

性能黄金法则 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTTP 协议 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

HTTP 协议 ,[object Object],[object Object],[object Object],[object Object]

80/20 性能法则 ,[object Object],[object Object],[object Object],[object Object]

Empty vs. Full Cache 1 用户请求 www.yahoo.com 2 用户请求其他页面 3 用户再次请求 www.yahoo.com

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

Empty vs. Full Cache Expires header 3 用户再次请求 www.yahoo.com with a full cache 1 用户请求 www.yahoo.com 2 用户请求其他页面

Empty vs. Full Cache ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

浏览器 cache 实验 ,[object Object],[object Object],[object Object]

浏览器 cache 实验 40-60% ~20% page views with empty cache users with empty cache

浏览器 cache 实验 ,[object Object],[object Object]

并行下载两个组件 in parallel per hostname HTTP/1.1 GIF GIF GIF GIF GIF GIF

并行下载 ,[object Object],[object Object],[object Object]

最大化并行下载响应时间 (seconds) 主机名

最大化并行下载响应时间 (seconds) 规则：使用 2 个最多不超过 4 个的主机名

总结 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

14 条最佳实践 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],来源于 Yahoo 研发团队在优化网络访问时积累下来的最佳实践

规则 1: 减少 Http 请求 ,[object Object],[object Object],[object Object],[object Object]

图片地图 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://www.w3.org/TR/html401/struct/objects.html#h-13.6

CSS Sprites – 推荐 ,[object Object],[object Object],http://alistapart.com/articles/sprites <span style=" background-image: url('sprites.gif'); background-position: -260px -90px;“ width:26px; height:24px;> </span>

内联图片 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],http://tools.ietf.org/html/rfc2397

合并脚本，合并样式表 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

合并脚本，合并样式表 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

规则 2: 使用 CDN ,[object Object],[object Object],[object Object],[object Object],[object Object]

规则 2: 使用 CDN ,[object Object]

规则 2: 使用 CDN ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

规则 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

规则 2: 使用 CDN ,[object Object],[object Object],[object Object],[object Object],[object Object],CDN 通常按其带宽和流量收费

规则 3 ：添加 Expires 头 ,[object Object],[object Object]

规则 3 ：添加 Expires 头 ,[object Object],[object Object],[object Object]

规则 3 ：添加 Expires 头 ,[object Object],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

规则 3 ：添加 Expires 头 ,[object Object],修改所有页面中的页面组件的文件名；文件名采用变量的方式；文件命名可采用文件名 + 版本号的方式，如 yahoo_2.0.6.js ；

规则 4: 压缩组件 ,[object Object],[object Object]

Gzip vs. Deflate ,[object Object],[object Object],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

Gzip: 并不仅仅适用 HTML ,[object Object],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

Gzip 配置 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],适用于代理服务器

Gzip 边缘情形 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

规则 5: 将样式表放在顶部 ,[object Object],[object Object],[object Object],[object Object]

规则 6: 将脚本放在底部 ,[object Object],[object Object],[object Object],[object Object]

规则 6: 将脚本放在底部 ,[object Object],[object Object],[object Object]

规则 7: 避免 CSS 表达式 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

一次性的表达式 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

事件处理器 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

规则 8: 使用外部脚本和 CSS ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

加载后下载 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

动态内联 ,[object Object],[object Object],[object Object],[object Object],[object Object]

规则 9: 减少 DNS 查找 ,[object Object],[object Object],[object Object]

TTL (Time To Live) ,[object Object],[object Object],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

浏览器 DNS 缓存 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

减少 DNS 查找 ,[object Object],[object Object]

规则 10: 精简 JavaScript ,[object Object],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 精简内联脚本 ?

精简 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 = "_YUICEOnSubscribe"; if (type !== onsubscribeType) { this.subscribeEvent = new YAHOO.util.CustomEvent(onsubscribeType, this, true); } };

精简 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="_YUICEOnSubscribe";if(type!==onsubscribeType){this.subscribeEv ent=new YAHOO.util.CustomEvent(onsubscribeType,this,true);}};

精简 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="_YUICEOnSubscribe"; if(_1!==_5){ this.subscribeEvent=new YAHOO.util.CustomEvent(_5,this,true); } };

精简 vs. 混淆 ,[object Object],[object Object],[object Object],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

精简 vs. 混淆总结 ,[object Object],[object Object],[object Object],[object Object]

规则 11: 避免重定向 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

重定向 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

避免重定向 ,[object Object],[object Object],[object Object],[object Object]

规则 12: 移除重复脚本 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

避免重复脚本 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

规则 13: 配置 ETag ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

ETags 的问题 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

规则 14: 使 AJAX 可缓存 ,[object Object],[object Object],[object Object]

其它网站 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) 新浪等级网站

HttpWatch ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Firebug ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

YSlow ,[object Object],[object Object],[object Object],[object Object],[object Object]

相关链接 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

谢谢大家！ ,[object Object]

高性能网站最佳实践

Recommended

Recommended

More Related Content

What's hot

What's hot (8)

Viewers also liked

Viewers also liked (20)

Similar to 高性能网站最佳实践

Similar to 高性能网站最佳实践 (20)

高性能网站最佳实践