淘宝首页前端开发分析

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 功能

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

。。。

转载于:https://www.cnblogs.com/rock506/archive/2011/07/15/2107183.html

淘宝首页前端开发分析相关推荐

网页开发——淘宝首页导航
这篇博文主要是重新学习(复习)前端知识,通过写淘宝购物首页导航为案例. html主要书写内容: 1.首先我写了一个大盒子,用于存放所用的全部标签 <div class="nav&quo ...
python开发跟淘宝有联系没_python每日获取淘宝首页关键字推荐词
每日美图介绍因为自己想着手搞一波淘宝,准备用于获取淘宝首页关键字推荐词,想化妆品.服装这种我们是不适合做的竞争太大了. 我们暂时定为水杯这种小类目的,对于新开的店面除了刷单,最重要的还是自然流量. ...
7.25 web前端-淘宝首页设计
hello everybody,许久不见,甚是想念,关于我为什么四天没更新博客的原因就是本次文章的标题,没错,我们老师布置了项目设计,而我这个大怨种选择了淘宝首页这个页面内容多的,以至于我这个小白敲了 ...
我在淘宝做前端的这三年 — 第一年
转眼已经离职半年多了,早就想写一篇工作总结,但由于一直在准备英语考试,又需要处理结婚和房子装修,没想到一拖拖了半年.在淘宝做前端是我第一份签了劳动合同的工作,在这个人才济济的大公司里,接触了非常多的人 ...
在淘宝做前端的这三年 — 第一年
关注"重度前端" 专注前端.专注全栈.输出价值助力前端深度学习 ━━━━ 前言转眼已经离职半年多了,早就想写一篇工作总结,但由于一直在准备英语考试,又需要处理结婚和房子装修,没 ...
页面布局（1）：淘宝首页
大家好,我是梅巴哥er. 入职前端后,我相信有很多小伙伴都是从写简单页面或者简单的功能开始入手的.比如活动页面,活动详情页,活动某项交互等. 为了快速适应开发需求,在较短时间内完成手头工作,以便挤出更 ...
微信小程序淘宝首页双排图片布局排版代码
小程序淘宝首页双排图片布局排版代码效果图: 使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式! 直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发! wxml: < ...
HTML+CSS简单的淘宝首页框架布局小练(一）
开的前端的课程,练习淘宝的前台页面的框架,就简单根据理解写了下,(小傻猫)记录学习的经历简单首先分析下淘宝首页的布局框架(小傻猫),自己理解的首先需要注意的是该部分的布局,是将该部分分成量大块布局 ...
一天造出10亿个淘宝首页，阿里工程师如何实现？
双11手淘首页的几个重要推荐场景截图如下: 如上图所示,左一场景为AIO综合会场,包括AIO日常场景(淘抢购.有好货.清单等).双11人群会场及行业会场:中间为AIOplus场景卡片综合会场,包括5张 ...

淘宝首页前端开发分析

lazy load技术：

。。。

淘宝首页前端开发分析相关推荐

最新文章

热门文章