淘宝2011新版首页开发实践
作者：拔赤 来源：taobaoUED 发布时间：2011-01-20 20:07:00
新年钟声刚过，淘宝新版首页全“心”上线了，这次设计大胆的将布局从 960px 伸展至 1000px，页面更通透，新首页更大范围的实践了 HTML5 和 CSS3，全面兼容 iPad，并在可访问性方面有了更多积极的尝试。对于我来讲，这次开发着实是一次奇妙的经历，也让我对可访问性、html5 和性能优化有了新的认识。
其实 html5 并不是那么遥不可及，现在也有着不少针对 pc 终端的 html5 template，如果不甚考虑 ie6/7/8 禁用脚本的情况，完全可以放手运用 html5 标签。那么针对那些 ie6/7/8 禁用脚本的用户，我们参照了 facebook 的做法，即引导用户进入带有noscript标识的 “/?_fb_noscript=1”页面，用 html4 标签替换 html5 标签，这要比为了保持兼容性而写大量 hack 的做法更轻便一些。
如果你足够细心，就会发现新首页并未完全遵循“栅格”，因为一个很纯粹的文档中，实现栅格效果所使用的层层 wrap 本身就缺乏语义，html5 带来了更多语义化的标签，这和缺乏语义的栅格实现是如此格格不入，摆脱栅格，容器用绝对定位，不用写那么多 hack，岂不多快好省～
另外，关于性能优化，之前我们的确过于依赖 yslow、pagespeed 的评分，其实，这些条条框框才是真正阻碍我们作 WPO 的拦路虎，不是说这些指标不科学，而是他们限制住了我们的思维和视野，更何况，他们都缺少对“加载/渲染时间”这个最重要的因素的评估，当用户更快的看到并可用页面（尤其是首屏），才是真正的性能提升，因此，这次开发特意针对 First Rendering（首次渲染）的指标进行一些重构，重写了几乎所有的逻辑层 js 代码 （domready 之前，甚至 Render 出 UI 之前，js 已经在运行了），当 js 效率更高，CPU 损耗更少时，浏览器才会更多的将硬件资源投入到渲染 Dom 本身，First Rendering 自然会更加提前，后续的渲染也会提速。可以参照新旧淘宝首页的 CPU 耗能对比，以及其对 First Rendering（绿线）的影响。
2010（旧）首页加载 CPU 损耗
2011（新）首页加载 CPU 损耗：
当然，延迟加载、延迟渲染等技术在这里依然适用，上次淘宝首页改版云谦同学作了详尽的总结，这里就不再赘述了。更多内容大家可以到这里下载 ppt。
0
投稿猜你喜欢
- 一. 10句话1.不要依赖register_global=ON的环境，从你刚懂得配置php运行环境甚至尚不明白register_global
- 昨天晚上睡觉前突然想到的，在此记一笔。传统方式以前我们做文章系统或新闻发布系统的时候，做文章内链（标签）的时候，通常是通过以下方式来实现的：
- 大概在九九年做游戏网站的时候，就对文章的发布感到麻烦，不过那会儿玩ASP不精。只是将就用着。在遇到长文件 10000 字时网页就是一大片长了
- 用Dreamweaver制作网页时，如果插入的图片、GIF动画、声音、视频或链接的网页是用中文命名的，在用IE浏览器浏览时可能显示不出来。以
- ASP有一个最重要的功能，就是它可以让你非常轻松地连接数据库。通常都是和一个Access或者一个SQL数据库相连。因为Access是最容易起
- 设置MySQL数据同步（单向&双向）由于公司的业务需求，需要网通和电信的数据同步，就做了个MySQL的双向同步，记下过程，以后用得到
- 有些时候我们需要得到刚刚插入数据库中的条目id，用于相关系统的更改，在以前我是使用select+top 1+desc 这种笨方法实现的，在没
我是一个初入互联网的视觉设计师，和以往做设计感受最大的不同就是：一个设计的最终定稿会受到多方面的挑战，有来自产品经理的，来自开发的，来自测试- Oracle关系型数据库管理系统是世界上流行的关系数据库，它是一个极其强大、灵活和复杂的系统，据说，在使用oracle时应有这样的思想，那就
- 在ASP.NET2.0通过SMTP的验证发送EMAIL ，代码如下：’Create a new MailMes
- 问：如何给导入文件加上时间戳标记?答：请参考下文中介绍的两种方法：1.在DOS下从系统获得时间戳利用Dos命令取得时间戳:C:\>ec
- 网页设计是由很多个不同的元素构成的,而这些元素的重要性都不同,并且有些元素还需要尤为的突出.有些元素彼此之间存在着联系,而另外的元素之间则一
- 很多开发人员对于IIS和ASP.NET的安装等问题困扰,特此做下面的小总结,请大家多交流!iis 坏了修复办法!一般IIS运行不了ASP.N
- 很久没有发表文章了，最近一直在研究产品设计标准的问题，之前有发过一篇关于 Axure的教程 ，相信很多人已经学会如何使用，这次我给大家介绍一
- 前段时间在网上找了一个“完美的”JavaScript对象克隆的函数，感觉还不错，但随后便出现了一些问题，发现这个克隆并不好用，在使用发现了如
- 缓存是基于Application实现的CacheState类，建议实例化时用名Cache程序代码<％ Class Cache
- 日期和时间类型MySQL有多个表示各种日期和时间值的数据类型， 比如YEAR和DATE. MySQL存储时间的最精确粒度是秒。 然而， 能做
- 很简单，只需建立一个worksheet和Excel相关的信息就可以了具体代码见下：<％set xlApp =&nb
- 虽然淘宝商城的名字中带有“商城”两字，但是很显然的，淘宝商城并不是一个B2C商城，淘宝商城仍只是一个C2C平台，充其量只是个收费版的淘宝。在
- 此文刊登在《程序员》2009年5月期：SQL全名是结构化查询语言（Structured Query Language）,一直是后台开发者用来
