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