Firefox web browser - Faster, more secure & customizable

Mozilla HacksにFirefox 22で登場する新機能「ビジュアルペイントフラッシュ」を紹介する記事が掲載された。ビジュアルペイントフラッシュはWebコンソールに追加された機能。再描画が実施された部分をフラッシュ表示するというもの。Webコンソールを表示させ、ビジュアルペイントフラッシュ機能をオンにすると、再描画が行われた部分が自動的にフラッシュ表示されるようになる。どの部分が再描画され、どういった負荷がかかっているのかを検討できる。

現行のWebページはJavaScriptやCSSを多用したインタラクティブなものが多い。そうしたページでは頻繁にページの一部が再描画される傾向にある。ビジュアルペイントフラッシュ機能を使うと、実際にページのどの部分が再描画の対象として扱われているかを視覚的に把握できるようになる。

ビジュアルペイントフラッシュ機能を使いたいページを閲覧

Webコンソールを起動

右下にあるハケのアイコンをクリック

再描画が実施された部分がフラッシュ表示される

マウスを起動させることでアクションが発生するメニューやリンクでも再描画を確認できる

アイコン化などを実施すると全面が再描画の対象となることがわかる

再描画の範囲を把握することは、PCのみならずスマートフォンやタブレットデバイスなど、よりリソースの限られた環境で軽快なページを実現する上での検討に役立つ。