JavaScriptでアニメーションするサイトを作るときに知っておきたいブラウザの仕組み
TweetHTML5 Carnivalの参加レポートをたくさんの方に読んで頂けて嬉しいです！ （ただ惜しむらくはURLが「fukuok」になっちゃっててすごく気持ち悪い） 僕個人としては、特におおくぼさんのJavaScriptに関するお話しなんかは普段やってる仕事に直接役立つような内容ですごく勉強になったセッションでした。 特にブラウザの仕組みに関する部分は、パフォーマンスを考えるうえでとても重要な内容だなと、一度しっかり勉強してみたいなと思いました。 そんなことを考えていたらあるサイトを見つけまして、これは昨日のセッションを直感的に理解するうえでも役にたつだろうと思ったのでこのエントリーを書くことにしました。 見つけたサイトというのは下記のリンクで、WEBサイトがブラウザによってレンダリング表示される様子を動画で見れるサイトです。 CSS Reflow | Reflow Visualiz
要約: Apple iPhone5のページのJPEGとJSとcanvasタグによるビデオの実装がやばいという話
2012 年 9 月 26 日 追記しました。 要約エントリー。 元記事 : iPhone 5 website teardown: How Apple compresses video using JPEG, JSON, and <canvas> アップルのサイトの iPhone5 のページにある「スライドしてアンロック」のアニメーションが、信じられない実装になっている、という話。簡単に要約してみた。（ミスなどの指摘は @lowply までお願いします） もともと h.264 と WebM の動画フォーマット戦争でブラウザ互換性の問題がまだ残っている上、iPhone などは「再生ボタン」を押さないと再生できなかったりするので、こうした短いアニメーションに video タグを使うことは最適解ではなかったらしい。 そこで発想の転換をして、Retina MBP のページでは、蓋が開くたった 2
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
