Hatena::ブログ(Diary)

{u:b}

 | 

April 17, 2012

画像置換のあれ

元記事 http://www.zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement/
紹介記事 http://coliss.com/articles/build-websites/operation/css/css-hack-new-image-eplacement-by-zeldman.html

元記事の最後にこういう文があります。

Performance is dramatically improved because a 9999px box is not drawn. Noticeably so in animations on the iPad 1.

で、元記事に寄せられた Paul Irish によるコメント。

Over at the HTML5 Boilerplate project we’re taking a look at this. So far, we’re unable to reproduce the performance advantage on modern hardware. It may just join the ranks of css gradients and box shadows as things to avoid on old hardware before things like the webkit-box-shadow perf fixes went in. http://wkb.ug/22102

https://github.com/h5bp/html5-boilerplate/issues/1005 We’re still investigating…

But to put this into perspective, removing one script tag from your head would have, at a minimum, around 300x more impact than this reflow optimization. But if you’re optimizing reflow on iPad 1 devices, then it’s certainly worth looking into.

超適当に言うと「HTML5 Boilerplate プロジェクトで話し合った結果、最近のハードウェアだとパフォーマンス上の利点は見つからなかった。でも初代 iPad に最適化するという視点から見たら価値がある」みたいな感じです。
(この訳があってるかは知らない)

このテクニックの良し悪しはともかく、一応元記事は見たほうがいいんじゃないかなーと思いました。

追記:
補足してもらいました。
http://terkel.jp/archives/2012/04/css-image-replacement-2012/

 |