1. 技术文章
  2. 淘宝首页前端开发分析

淘宝首页前端开发分析

由 回眸只為那壹抹淺笑 提交于 2020-02-21 11:42:47

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技术：

效果：

页面当用户触发某事件才渲染相应内容，从而提高页面渲染效率。

相关阅读：分析淘宝商城首页的 lazy load 功能


=============================================================


。。。


标签
前端开发
html5
css
uri
gbk
content
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!