2013年2月10日
カテゴリ: Web制作
JavaScriptでアニメーションするサイトを作るときに知っておきたいブラウザの仕組み
HTML5 Carnivalの参加レポートをたくさんの方に読んで頂けて嬉しいです!
(ただ惜しむらくはURLが「fukuok」になっちゃっててすごく気持ち悪い)
僕個人としては、特におおくぼさんのJavaScriptに関するお話しなんかは普段やってる仕事に直接役立つような内容ですごく勉強になったセッションでした。
特にブラウザの仕組みに関する部分は、パフォーマンスを考えるうえでとても重要な内容だなと、一度しっかり勉強してみたいなと思いました。
そんなことを考えていたらあるサイトを見つけまして、これは昨日のセッションを直感的に理解するうえでも役にたつだろうと思ったのでこのエントリーを書くことにしました。
見つけたサイトというのは下記のリンクで、WEBサイトがブラウザによってレンダリング表示される様子を動画で見れるサイトです。
CSS Reflow | Reflow Visualizations
このWEBサイトのトップページにある動画を貼り付けたので見てみてください。
これはブラウザがWEBページがどのようにレンダリングするかを可視化した動画です。
動画は大きく下記の2つのパートに分かれると思います。
1.まずは要素を配置する。(フロー)
2.配置された要素に対してCSSに基づいた装飾を加えていく。(ペイント)
このブラウザの動作をまず知ることがJavaScriptのパフォーマンスをあげるのに重要になってきます。ブラウザの仕組みについて詳しくは下記サイトによくまとめられているそうです。
ブラウザのしくみ: 最新ウェブブラウザの内部構造 – HTML5 Rocks
詳しくは下にリンクを貼ったUstreamとスライドを見たほうが早いと思いますが、要約をするとブラウザがWEBページを描画するときには
HTMLを解析 → レイアウト(フロー) → CSSの内容も含めた描画(ペイント)
というステップを踏みます。
フローの段階でブラウザは「レンダーツリー」と呼ばれる、「配置すべき要素のリスト」をチェックするのですが、さらに細かく見るとレンダーツリーは大きく3つのツリーに分かれます。
・DOMツリー ・・・普通の要素
・フロートツリー ・・・フロートしちゃってる要素
・絶対ツリー ・・・position:fixedやabsoluteされてる要素
要素をアニメーションさせると、要素を動かすたびにブラウザは何度もフローやペイントを繰り返します。(リフロー&リペイント)
で、JavaScriptっていうのはこの3つのツリーを別々に処理するんだそうです。
ということは、周りへの依存関係が少ない絶対ツリーの要素は、アニメーションさせてもさほど処理は重くならないので、動かす要素はposition:fixedやabsoluteして絶対ツリーに入れていこうよということなのです。
逆にDOMツリーの要素は親子関係などがある場合が多いので、1つ要素を動かすと他のレイアウト調整もしなければならず、リフロー&リペイントの負荷が大きくなるのです。
ただ、絶対配置が多くなるとレイアウトしずらくなるよねってお話しもされてました。
そこはうまくレイアウトもJavaScriptでやるか、パフォーマンスを犠牲にするかのトレードオフという感じもします。
さっきも言ったとおり、この内容はスライドとUstream見てもらえればそのまんま説明されているのですが、ただ単にこのWEBサイト見てもらうと、この説明が動画でより理解しやすくなるなーと思って紹介しようと思っただけなんです。はい。
CSS Reflow | Reflow Visualizations
こちらの動画&スライドを見ればばっちり理解できると思います!