Webパフォーマンス最適化シリーズ(2)：ページ描画時間の解析_html/css_WEB-ITnose

この記事は Bole Online - J.c によって翻訳され、sunbiaobiao によって校正されました。無断転載禁止です！
英語の出典: www.deanhume.com。翻訳チームへの参加を歓迎します。

最近、ロンドンで開催された Facebook モバイル開発者カンファレンスに参加しました。一日中たくさんの会話がありましたが、特に私の注目を集めたのは「Make m.facebook.com fast」というパフォーマンスに関するセッションで、Facebook がどのように常に Web パフォーマンスの向上に努めているか、そしてそこから得た教訓について説明していました。それから。

Facebook 開発チームは、Chrome Cannry を使用して Web ページ CSS のパフォーマンスをテストします。 Google Chrome Canary には Chrome の最新機能が含まれており、まもなく Chrome の標準バージョンとなる最新機能のいくつかを試すことができます。 Chrome Canary は開発者と早期採用者向けに特別に設計された「プレビュー バージョン」であることを考慮すると、Chrome 開発チームの急速な反復により発生するバグが発生する場合があります。それでも、ウェブページパフォーマンスをテストするのに役立つ優れた開発者ツールがいくつかあります。

この記事では、Chrome Canary の開発者ツールを使用して、ページのスクロールが遅くなり、ページの描画時間に影響を与える可能性がある CSS の部分を見つける方法を説明します。ブラウザーがページをロードして描画するとき、「描画」してコンテンツを画面に表示するために、表示されているすべての要素を反復処理する必要があります。これはレイアウトと複雑な CSS に依存するため、描画時間が非常に長くなる場合があります。これにより、Web ページが途切れ途切れになって表示されたり、応答が遅くなったりすることがあります。この種の遅いスクロールはジャンクとも呼ばれます (ジャンクとは Android システムの専門用語で、画面上の滑らかな動的な画像を中断するラグ現象を指します)。これは、ブラウザが複雑な CSS を描画するのに苦労するモバイル デバイスでスクロールする場合にさらに顕著になります。

ページの読み込み時間が非常に速い場合でも、ページの描画時間を研究する価値はあります。デバイスが異なれば CSS プロパティに対する反応も異なりますが、いずれにしても、パフォーマンスの向上は常に良いことです。テストするには、まず Google Chrome Web サイトにアクセスして Chrome Canary をダウンロードする必要があります。インストールが完了したら、テストする Web ページを開くことができます。 HTML5 Rocks Web サイトには、優れたケーススタディ Web サイトがあり、これを使用して、エネルギー消費の高い CSS プロパティの操作によってページの描画時間が増加することを証明しています。

このウェブページを開いたら、F12を押すと、Chromeの開発者ツールがポップアップします。次に、開発者ツールの右下にある [設定] ボタンをクリックして、ページ レンダリングのパフォーマンスをテストするための設定をオンにします。

クリックすると、設定を変更できるコントロールパネルが表示されます。

ページのレンダリングパフォーマンスをテストしたいので、「連続ページ再描画を有効にする」と「FPSメーターを表示する」を選択します。設定パネルを閉じてページを表示すると、ページの右上隅に以下の画像が表示されるはずです。

この表は、現在のページの描画に必要な時間をミリ秒単位で示し、右側は現在のグラフの最小値と最大値を示します。さらに、過去 80 フレームの樹形図も表示されます。このグラフの優れた点は、常にページの再描画を試行し、ページが初めて読み込まれているかのように見えることです。これにより、毎回ページをリロードしなくても、CSS が原因で発生する描画の問題を正確に特定できます。変更が影響するかどうかに関係なく、ツリーマップは継続的に監視します。

このページの HTML と CSS を詳しく見ると、div の 1 つに CSS 効果が追加されていることがわかります。

この div には、境界半径 (角丸) と射影属性があります。 box-shadow 属性を削除する場合は、描画中の FPS メーターの変化を観察してください。

うわー！グラフからわかるように、ページ描画時間には興味深い変化が見られます。 border-radius 属性を削除するだけで、この変更によりページの描画時間が大幅に短縮されることがわかります。

CSS プロパティを更新または変更すると、このグラフは即座に削除されます。同じ要素で box-shadow と border-radius の両方を使用すると、ブラウザーが最適化できないため、描画負荷が非常に重くなります。頻繁に再描画する必要がある要素がある場合は、ページを作成するときにその点に留意する必要があります。

これは、Google IO Web サイトの素晴らしいビデオです。描画時間についてさらに詳しく説明し、Web ページ上の「ジャンク」を軽減するためのヒントをいくつか紹介しています。

描画時間の最適化について詳しく知りたい場合は、これらのリンクをチェックしてください。

テストをお楽しみください!