新年鐘聲剛過，淘寶新版首頁全“心”上線了，這次設計大膽的將布局從 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。

此致，鳴謝法海、承玉、王松、玉澧、黑三，最后要特別感謝下玉澧童鞋，有了你的妙筆，這次首頁才會如此閃亮。