淘宝2011新版首页开发实践

导读：淘宝开发团队成员写的新年首页改版心得，与技术界人士分享。

以下是文章内容：

新年钟声刚过，淘宝新版首页全“心”上线了，这次设计大胆的将布局从 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。

本文转自：http://ued.taobao.com/blog/2011/01/11/dev-share-for-taobao-new-homepage/