淘宝首页前端开发分析
doctype & charset：
<!DOCTYPE HTML> ...... <meta charset="gbk">
页面使用了HTML5 dtd以及HTML5 charset，页面编码使用“gbk”
//从ASCII、GB2312到GBK，这些编码方法是向下兼容的，即同一个字符在这些方案中总是有相同的编码，后面的标准支持更多的字符。在这些编码中，英文和中文可以统一地处理。区分中文编码的方法是高字节的最高位不为0。按照程序员的称呼，GB2312、GBK都属于双字节字符集 (DBCS); //UTF-8是Unicode的实现方式之一; //GBK、GB2312等与UTF8之间都必须通过Unicode编码才能相互转换;
相关阅读：gbk, gb2312,big5,unicode,utf-8,utf-16之间的关系
=============================================================
IE9下Pin的开发:
效果：
<meta name="application-name" content="淘宝网 - 淘！我喜欢" /> <meta name="msapplication-tooltip" content="淘宝网 - 淘！我喜欢" /> <meta name="msapplication-task" content="name=淘宝商城;action-uri=http://www.tmall.com/;icon-uri=http://img02.taobaocdn.com/tps/i2/T1bZNxXjXjXXXXXXXX.png" /> <meta name="msapplication-task" content="name=聚划算;action-uri=http://ju.taobao.com/index.htm;icon-uri=http://www.taobao.com/favicon.ico" /> <meta name="msapplication-task" content="name=登录;action-uri=https://login.taobao.com/member/login.jhtml;icon-uri=http://www.taobao.com/favicon.ico" /> <meta name="msapplication-navbutton-color" content="#FF6600" /> <link rel="shortcut icon" href="http://www.taobao.com/favicon2.ico" type="image/x-icon" />
//name是msapplication-task，这里是说这是给Microsoft Application（微软应用程序）设定的Task（任务）。 //content是：name=淘宝商城;action-uri=http://www.tmall.com/;icon-uri=http://img02.taobaocdn.com/tps/i2/T1bZNxXjXjXXXXXXXX.png //显然，IE需要解析一下content，较好看的结果： //name（显示的文字）是Lifestyle //action-uri（打开的网页）是http://lifestyle.msn.com //icon-uri（显示在Jumplist中的图标）是http://col.stc.s-msn.com/br/gbl/lg/csl/favicon.ico
相关阅读：看IE9带来的新概念
=============================================================
添加Search：
效果：
<link rel="search" type="application/opensearchdescription+xml" href="http://a.tbcdn.cn/plugins/opensearch/provider.xml" title="淘宝购物" />
相关阅读：如何让网站加入到搜索引擎
=============================================================
combo CSS：
<link href="http://a.tbcdn.cn/p/fp/2011a/??html5-reset-min.css,global-min.css,header/header-min.css,product-list/product-list-min.css,attraction/attraction-min.css,expressway/expressway-min.css,category/category-min.css,category/sub-promotion-min.css,guide/guide-min.css,hotsale/hotsale-min.css,bottom-gg/bottom-gg-min.css,subfooter/subfooter-min.css,footer/footer-min.css?t=20110630.css" rel="stylesheet" />
Web性能优化最佳实践中最重要的一条是减少HTTP请求，它也是YSlow中比重最大的一条规则。减少HTTP请求的方案主要有合并JavaScript和CSS文件、CSS Sprites、图像映射（Image Map）和使用Data URI来编码图片。
相关阅读：在服务端合并和压缩JavaScript和CSS文件
=============================================================
让IE支持HTML5标签：
<!--[if IE]> <script src="http://a.tbcdn.cn/p/fp/2011a/html5.js"></script> <![endif]-->
要想IE支持HTML5标签，只要在使用HTML5标签之前，通过document.createElement("header")动态生成HTML5标签即可。
相关阅读：让IE浏览器支持HTML5标准的方法
=============================================================
aside的icon旋转：
效果：
<!--html--> <ul> <li><a href="#"><s></s><strong>淘宝天下</strong><span></span></a></li> <li><a href="#"><s></s><strong>彩票</strong><span>美洲杯足彩</span></a></li> <li><a href="#"><s></s><strong>淘宝旅行</strong><span>机票3折</span></a></li> <li><a href="#"><s></s><strong>手机淘宝</strong><span>狂送手机</span></a></li> <li><a href="#"><s></s><strong>免费试用</strong><span>10元拿走</span></a></li> <li><a href="#"><s></s><strong>阿里旺旺</strong></a></li> <li><a href="#"><s></s><strong>宝贝分享</strong><span>买家实拍</span></a></li> <li><a href="#"><s></s><strong>全球购</strong></a></li> </ul>
/*css*/
li s {
-moz-transition: all 0.2s ease-in-out 0s;
background: url("icon.png") no-repeat;
}
li a:hover s {
-moz-transform: rotate(30deg);
}
=============================================================
图片轮换CSS动画：
效果：
<div style="position:relative;"> <ol> <li><a href="#"><img src="1.jpg"/></a></li> <li><a href="#"><img src="2.jpg"/></a></li> <li><a href="#"><img src="3.jpg"/></a></li> <li><a href="#"><img src="4.jpg"/></a></li> </ol> <ul> <li class="current">1</li> <li class="">2</li> <li class="">3</li> <li class="">4</li> </ul> </div>
ol {
position:absolute;
top: 0;
-moz-transition-property: top;
-moz-transition-duration: 500ms;
-moz-transition-timing-function:cubic-bezier(0.1, 0.5, 0.1, 1);
-webkit-transition-property: top;
-webkit-transition-duration: 500ms;
-webkit-transition-timing-function:cubic-bezier(0.1, 0.5, 0.1, 1);
}
相关阅读：你需要知道的CSS3 动画技术
=============================================================
textarea保存用户状态html模版：
<textarea class="hidden" rel="0"> <div class="help-member"> <ul class="clearfix"> <li><a href="#">三个月买入</a></li> <li><a href="#">等待您评价</a></li> <li><a href="#">等待您确认收货</a></li> <li><a class="mytaobao" href="#">进 <strong>我的淘宝</strong> 查看更多</a></li> </ul> </div> </textarea> <textarea class="hidden" rel="1"> <div class="help-member"> <ul id="J_helpMember" class="clearfix"> <li>等待您付款(<b>0</b>)</li> <li>等待您评价(<b>0</b>)</li> <li>等待您确认收货(<b>0</b>)</li> <li><a href="#">进 我的淘宝 查看更多</a></li> </ul> </div> </textarea> <textarea class="hidden" rel="2"> <div class="help-guest"> <a href="#" class="help-guest-register"> <img src="sprites.gif" alt="免费注册" /> </a> <a href="#" class="help-guest-login"> <img src="sprites.gif" alt="登录" /> </a> <a href="#" class="help-guest-openshop"> <img src="sprites.gif" alt="免费开店" /> </a> </div> </textarea> <textarea class="hidden" rel="3"> <div class="help-overseas"> <a class="m" href="#"><span>在线客服</span></a> <a href="#"><span>付款须知</span></a> <a class="s" href=#"><span>激活支付宝账户</span></a> <a class="s" href="#"><span>海外运费小贴士</span></a> </div> </textarea>
=============================================================
Img Sprite技术对按钮加载顺序优化：
<!--这与淘宝原始结构稍有不同-->
<ul>
<li class="nav1"><a href="#">1</a></li>
<li class="nav2"><a href="#">2</a></li>
<li class="nav3"><a href="#">3</a></li>
</ul>
li {float:left; margin:0; padding:0;}
li a {float:left; display:inline; height:38px; text-indent:-10000px; overflow:hidden; background:url('sprites.gif') no-repeat;}
li.nav1 a {width:103px; background-position:0 -19px;}
li.nav1 a:hover {background-position:0 -57px;}
li.nav2 a {width:91px; background-position:-103px -19px;}
li.nav2 a:hover {background-position:-103px -57px;}
li.nav3 a {width:106px; background-position:-194px -19px;}
li.nav3 a:hover {background-position:-194px -57px;}
效果：
淘宝的处理方法：
/*修改过的CSS*/
li a:hover {margin-left:-1px; padding-left:1px;}
li.nav1 a:hover {background-position:1px -57px;}
li.nav2 a:hover {background-position:-102px -57px;}
li.nav3 a:hover {background-position:-193px -57px;}
效果：
<!--实际上淘宝的代码-->
<ul>
<li class="nav1"><a href="#"><img src="img/sprites.gif"/></a></li>
<li class="nav2"><a href="#"><img src="img/sprites.gif"/></a></li>
<li class="nav3"><a href="#"><img src="img/sprites.gif"/></a></li>
</ul>
淘宝这样处理的原因是：由于浏览器渲染时认为img为内容，而background只是修饰，所以在加载时，浏览器会先加载img图片，而最后才加载background的图片。浏览器这样认为，从逻辑上来讲是对的，但在实际运用中，我们往往会把导航做为最重要的部分，而且希望它能够最快的加载出来。由于浏览器的这个特性，我们往往不得不接受在加载大量img图片之后才看到导航缓缓出现，如果background在导航中仅仅只是修饰作用还好，如果像此例般，描述性文字是存在于图片中，继而让浏览者面长时间对空白等待，这就不可接受了。
相关阅读：淘宝的新Sprite方法——使用Img Sprite技术对按钮加载顺序优化的简单研究
=============================================================
lazy load技术：
效果：
页面当用户触发某事件才渲染相应内容，从而提高页面渲染效率。
=============================================================
