新年鐘聲剛過，淘寶新版首頁全“心”上線了，這次設計大膽的將佈局從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。
此致，鳴謝法海、承玉、王松、玉澧、黑三，最後要特別感謝下玉澧童鞋，有了你的妙筆，這次首頁才會如此閃亮。
哦？彩蛋，不說了，你懂得～
在淘寶首頁搜索框輸入about:staff，就會彈出產品設計師們的Blog。同時幾個圖案連起來是：祝親卯年吉祥
特別注意：本站所有轉載文章言論不代表本站觀點，本站所提供的攝影照片，插畫，設計作品，如需使用，請與原作者聯繫，文章轉自alibuybuy