Google Chrome の Web Developer Tool を利用した「ペイント」の確認方法を紹介します。 まず「ペイント」は、ブラウザが表示領域に要素(画像やテキストなど)を配置することです。なので「ペイント」自体は普通のことで何ら悪いことではありませんし、どのグラフィカルなブラウザでも行われていることです。 しかし、スクロール時やスクロールしていない時に「ペイント」が何度も発生する「ペイントストーム」はパフォーマンス上の大きな問題です。 前回は、allWebクリエイター塾のウェブサイトを元に「ペイントストーム」がレンダリングの障害になることを理由に改善方法を説明しました。 Google Web Developer Tool での「ペイント」表示設定手順 ここからは実際にallWebクリエイター塾のサイトを題材にGoogle ChromeのDeveloper Toolで
![レスポンシブWebデザインでも重要、Google Chromeでの「ペイント」の確認方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f786c37f80ee71935a0a55488b37f42f1b2a43d/height=288;version=1;width=512/http%3A%2F%2F3.bp.blogspot.com%2F-na6D4W9D5w4%2FU4QVzT7xo2I%2FAAAAAAAAFLs%2FpUm0ktq8Qhk%2Fw1200-h630-p-k-no-nu%2F%25E3%2582%25B9%25E3%2582%25AF%25E3%2583%25AA%25E3%2583%25BC%25E3%2583%25B3%25E3%2582%25B7%25E3%2583%25A7%25E3%2583%2583%25E3%2583%2588%2B2014-05-27%2B13.27.33.png)