GeckoのReflowをアニメーションにする - 最速チュパカブラ研究会

MDCの記事用にGeckoのReflow（レイアウトを組み立てる処理）の過程をアニメーションGIF↑にしましたが、これが思ったより良い画になったので、トゥイーニングをつけてムービーを作ってみました。 まず、みんなの好きなGoogle。あんまり面白くないです 続いてWikipedia。スクロールバーが出て表示域が狭まったために、サイズを再調整している様子が見えます。 最後に、Mozilla.orgのトップ。floatの扱いがよくわかります。ここでもスクロールバーの出現に伴う再配置が発生しています。 作り方は大体以下のような感じです 各frameのrectが変化したところで位置、大きさ、this pointer値および親のthis pointer値をログに書き出すコードをMozillaに仕込む Rubyスクリプトでログを舐めて、frame treeを再構成する もう一度最初からログを舐めて、各

[ethertank]

"スクロールバーの出現に伴う再配置"を何とかしたら速くなったりするのかな・・・？（overflow-y:scroll を先に当てるとか）。

[edo_m18]

これ面白いなー。これを瞬時に計算してるのか・・。

[Cherenkov]

可視化 GeckoのReflow（レイアウトを組み立てる処理）の過程をアニメーションGIF

[sigwyg]

GeckoのReflow（レイアウトを組み立てる処理）の過程をアニメーションGIF

[tsukkee]

レンダリングの様子をムービーに

[progd]

"GeckoのReflow（レイアウトを組み立てる処理）の過程をアニメーションGIF↑にしました"

[webmarksjp]

ブラウザ

[toton]

レンダリング過程の可視化

[hokuto_vii]

レンダリング過程の可視化。

[nanto_vi]

レンダリング過程の可視化。

[nakao_mitsuteru]

これはすごい

[se-mi]

geckoレンダリングエンジンの動き。

[suttang]

ブラウザがページをレンダリングする様を映像に。かっこいい

[x12]

再描写するから表示が遅くなるんかな？

[lucky-bag]

スクロールバーが出現した際のfloatの再配置とか興味深い。

[Yuichirou]

SFの近未来コンピュータっぽくて感覚的にかっこいい。

[yuhran]

再描写するから表示が遅くなるんかな？

[hassylin]

面白い。スクロールバーが曲者

[B-SAKATU]

GeckoのReflow（レイアウトを組み立てる処理）の過程をトゥイーニングをつけてムービーに。float のレンダリングの仕組みがちょっとわかった。

[uzuki-first]

geckoのレイアウト構築をアニメーションに！こんなことができるんだ。

[ckom]

うはぁ。

[pscs]

かっこいー

[send]

すげー

[secondlife]

おもしろー

[nilab]

最速チュパカブラ研究会 - GeckoのReflowをアニメーションにする:直接アニメーションにするのではなく、ログにとってから

[dotimpact]

かっくぇー

[hikeda]

レンダリングイメージを可視化

[tks_period]

見事だなぁ。作り方が非常に参考になる。

[eborat]

かっこいいー。ありそでなかった。

[tofu-kun]

人の見えないところで頑張っているんだなぁ