
我在 Yahoo! 時,有幾位設計師向我請求 YSlow 原 logo 的 PSD,想要用於今年一些活動
上的推廣產品,例如 T-shirts、海報、傳單等等,但自從我加入了 Exceptional Performance
Team(http://developer.yahoo.com/performance/)主導 YSlow 與其他效能工具的發展之
後,我就沒有印象把它放到哪去了。為了解決這個問題,我決定從頭開始重新建立它,因
為看起來好像不怎麼複雜,問題在於,我是個速度狂,而非設計師,所以在經過著名的
Pure CSS Twitter Fail Whale(http://www.subcide.com/articles/pure-css-twitter-fail-whale/)
的啟發後,我決定發揮我的 CSS 功力,把焦點放在效能上,為那些設計師提供一個可縮
放的 YSlow logo(http://wh.yslow.org/css3-logo),並且盡可能讓它被用在 Web 上時,能
有較小的圖像負載量(image payload)。
所面對的挑戰
從效能的角度來看,這是一項有趣的挑戰,因為用的程式碼越少,最後所得到的圖像就會
越小,效能(描繪時間)也就會越快。我的目標是建立一個能夠用在 Web 上各個地方的
統一解決方案。除了效能考量外,身為一位前端工程師(front end engineer),我也很好
奇 CSS3 在此能夠幫上什麼忙(或許是跨瀏覽器的部分),以及它所帶來的限制。我 ...