on:2017年2月21日sponsorsブラウザがページを表示する際にサーバーからHTMLのレスポンスを受け取ると、スクリーンにピクセルが描画されるまでに多くのステップが必要になります。Path)」と呼ばれます。パスを理解することで、サイトのパフォーマンスを改善するのに役立ちます。Path下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。Path)には、6つの段階があります。Model)ツリーとは、パースされたHTMLのドキュメントをツリー構造として表現したものです。ルート要素である<html>から始まり、ページ上のあらゆる要素やテキストごとにノードが作成されます。他の要素にネストされた要素は子ノードとして表現され、各ノードにはその要素の属性すべてが含まれます。<a>要素はそのノードに関連づけられたhref属性を持ちます。下記のコードでDOMツリーを見てみましょう。2017</small></footer></body></html>DOMツリーは、下記のようになります。サンプルのHTMLのDOMツリーHTMLの良い点は、部分的に実行できることです。ページにコンテンツが表示されるには、完全なドキュメントを読み込む必要はありません。他のリソース、CSSとJavaScriptがページのレンダリングをブロックする可能性があります。Model)とは、DOMに関連付けられたスタイルのオブジェクトを表現したものです。DOMと類似した方法で表現されますが、明示的に宣言されているか暗黙的に継承されているかにかかわらず、各ノードのスタイルが関連づけられて表現されます。前述のHTMLのstyle.cssファイルには、次のようなスタイルがあります。}CSSOMツリーは、下記のようになります。resource)」と見なされます。ツリーの作成を参照)を構築することができないことを意味します。HTMLとは異なり、カスケードの性質を継承しているため、CSSを部分的に使用することはできません。ドキュメント内で後に定義されたスタイルは、前に定義されたスタイルを上書きして変更することができます。そのため、スタイルシートのすべてがパースされる前にスタイルシートで前に定義されたCSSのスタイルを使い始めると、間違ったCSSが適用されることがあります。次の段階に進む前に、CSSを完全にパースする必要があります。ブロッキングと見なされます。"stylesheet">タグはmedia属性を指定することができ、適用されるスタイルのメディアクエリを指定することができます。ブロッキングとみなされません。blocking)」にもなります。これは、JavaScriptファイルは実行される前にCSSOMが構築されるまで、待機する必要があるからです。resource)」と見なされます。これは、HTMLドキュメント自体をパースすることがJavaScriptによってブロックされるからです。パーサーが<script>タグに到達すると、そのスクリプトが内部か外部かに関係なく、取得して(外部の場合)実行します。そのため、ドキュメント内の要素を参照するJavaScriptファイルがある場合は、そのドキュメントを記述した後に配置する必要があります。ブロッキングを避けるために、async属性を適用して非同期にロードできます。ツリーはDOMとCSSOMの両方を組み合わせたもので、ページに最終的に表示される内容を表現するツリーです。none;」を使用してCSSで非表示にした要素は含めないということを意味します。ツリーが作成されます。レイアウトの生成レイアウトはビューポートのサイズを決定するもので、パーセンテージやビューポートの単位に依存するCSSスタイルのコンテキストを提供します。"viewport">タグによって決まります。タグが指定されていない場合は、デフォルトのビューポート幅である980pxが適用されます。"viewport">の値は、デバイスの幅に対応するようにビューポートサイズを設定することです。content="width=device-width,initial-scale=1">もしユーザーが幅1000pxのデバイスでWebページにアクセスした場合、サイズはその単位に基づいて決まります。ビューポートの半分は500pxで、10vwは100pxになります。ペインティング最後の段階はペインティング(Painting)で、ページの目に見えるコンテンツをピクセルに変換して、スクリーンに表示します。ペインティングにかかる時間は、DOMのサイズや適用されるスタイルによって異なります。いくつかのスタイルは、他のスタイルよりも多くの作業を実行する必要があります。複雑なグラデーションの背景画像は、単色の背景色よりも時間がかかります。パスを調べるクリティカルレンダリングパスを調べるのは、Chromeのデベロッパーツールで調べることができます。「Timeline」タブにあります(CanaryではPerformanceに改名)。前述のサンプル(<script>タグを追加しました)を見てましょう。src="main.js"></script></body></html>ページロードのイベントログを見ると、下記が表示されます。RequestHTMLとDOM構造のパースを開始。style.cssとmain.jsのGETリクエストを送信。Stylesheetstyle.cssによってCSSOMが作成。Scriptmain.jsを評価。"viewport">タグに基づいてレイアウトを生成。Paintドキュメント上のピクセルをペイント。パスを最適化する方法を決定することができます。