cidermitainaスマートフォン用の表示で見るcidermitainaフロントエンドエンジニアをやっています。頑張るから読んでほしい。何が起こっているかわかる限り説明してみてください。チューニングを読んで勉強したのでそのmemoです。Nitro(JavaScriptCore)Blink,WebKit,Geckoはオープンソースのレンダリングエンジン。BlinkはWebKitをフォークして誕生。ブラウザ内のコンポーネントいくつかのソフトウェアコンポーネントによって構成されている。知っておきたい2つの重要なコンポーネントは以下。レンダリングエンジンJavaScriptエンジンレンダリングエンジンとは?HTMLの描画エンジン。Webページのレンダリングのみを担当。HTMLや画像ファイルやCSS、JavaScriptなどを読み取り画面上の実際のピクセルとして描画する。JavaScriptエンジンとは?JavaScriptの実行環境を提供するソフトウェアコンポーネント。DOMツリー、CSSOMツリーなど内部のオブジェクト、APIに対してJavaScriptからアクセスできるようにバインディングを提供。Modelを意味する略語であり、ブラウザでロードされたCSSのツリー構造を保持する仕組み。ブラウザは、このCSSのツリー構造をDOMに対して適用することで、上位のスタイルからより具体的な下位のスタイルへと連鎖的にスタイルを決定していく。ブラウザのレンダリングの流れレンダリングの大まかな流れLoading(リソース読み込み)↓Scripting(JavaScript実行)↓Rendering(レイアウトツリー構築)↓Painting(レンダリング結果の描画)4つの工程からレンダリングが始まって、最終的に描画されるまでをフレーム(Frame)と呼ぶ。このフェーズでは、次の2つの処理がある。リソースのダウンロードHTMLを含むリソースをサーバーからダウンロードする。リソース取得に用いるネットワークプロトコルブラウザは与えられたURLをもとにレンダリングをもとにレンダリングに必要なリソースを様々なネットワークプロトコルを通じて取得する。Protocol)ネットワークのノード間のパケットのやり取りを中継するプロトコル。HTTPでネットワーク越しにリソースを取得する場合、リソースの取得の速さはIPのパケットの届く速度に依存する。→HTTPでやり取りされるデータパケット内に格納されるから。データの通信に利用される最小単位のデータ。Security)与えられたURLのプロトコル部分がhttpsだった場合TCPとHTTPの間でTLSプロトコルを利用する。TLSは一般にSSLと呼ばれる。Protocol)IPに対して機能を付加。TCPプロトコルは、IPに対してデータの欠損の検知やデータの送信順の保証などにお信頼性のあるデータ通信を提供するがUDPではそのような機能は特に追加しない。HTTPウェブページのコンテンツを送受信するために利用されるプロトコル。HTTPレスポンスを返す。System)IPアドレスを解決するためのシステム、プロトコル。TCP接続では、接続を開始するのに相手方のIPアドレスが必要。ブラウザはURLに含まれているホスト名をIPアドレスに変換した上でHTTPリクエストをサーバーへと送信する。DNSはホスト名に紐づくIPアドレスを検索するための分散システム。それぞれのリソースの読み込みブラウザはホスト名の解決などを経て、HTML,CSS,JacaScriptや画像といったリソースを取得する。最初に読み込まれるリソースはHTMLファイル。HTMLファイル内に記述されているリソースの参照があれば、さらにそのリソースを読み込む。取得したリソースは、パースされてブラウザの内部表現に変換される。HTMLコンテンツの場合はDOMツリーにCSSの場合はCSSOMツリーにそれ以外にリソースも、レンダリングエンジンの実装に沿った内部表現に変換される。HTMLの読み込みブラウザは与えられたウェブページのURLを元にサーバーへHTTPリクエストを送信。HTTPレスポンスとしてHTMLを取得する。読み込んだHTMLを解釈してドキュメントのDOMツリーを構築する。DOMツリーへの変換過程の中でツリーに含まれる画像やCSSなどのドキュメントに紐づくリソースに取得や読み込みを行う。ブラウザは構築したDOMツリーを元にしてRenderingの処理を行う。Model)HTMLのドキュメントを表現するオブジェクト。DOMツリーは、レンダリングエンジンが利用する木構造を持つ内部表現。字句解析コンパイラーがソースコードを解析し、目的のプログラムを生成する際の処理工程のひとつ。字句解析は、ソースコードに記述された変数や定数などの値を実際の値に展開するまでを担当し、その結果を次の工程である構文解析に引きわたす。Model)ツリーへと変換される。DOMツリーと違ってCSSOMツリーの深さは可変ではなく、一定ですが、ルールセットが増えれば増えるほどDOMツリー内の要素に適用されるスタイル計算にかかる時間が大きくなる。Scriptingリソースを一式読み込んだ後、JacaScript実行(Scripting)へ移行。レンダリングエンジンは、JavaScriptのコードをJavaScriptエンジンに引き渡して実行させる。※JavaScriptエンジンの実装によって異なる。JavaScriptの実行は、最初にJavaScriptファイルを読み込んだとき以外にも、DOMイベントが発火し、イベントリスナが起動するときに起こる。字句解析と構文解析JavaScriptエンジンは、与えられたコードを何らかの実行可能な形式に変換(コンパイル)した上でJavaScriptに書かれた処理を実行する。tree、AST)と呼ばれるコンパイル可能な形に変換する。データ構造に起こしたもの。JavaScriptの文法に沿った形で表現される木構造のデータ。コンパイルJavaScriptエンジン内部のコンパイラは、先ほど構築した抽象構文木を実行可能な形式にコンパイルする。Time)コンパイル型CPUが直接解釈できる機械語に変換する。機械語への変換をするのでパフォーマンスが優れるChromeのV8やSafariのNitroではJavaScriptのコードをJITコンパイルして実行する。実行可能な形式にコンパイルされたJavaScriptのコードは、処理系内部の仮想マシン、もしくはCPUで実行される。RenderingJavaScriptの実行が終わると、レイアウトツリー構築(Rendering)が行われる。スタイルの計算DOMツリー内の全てのDOM要素に対して、どのようなCSSプロパティが当たるのか計算する。CSSOMツリー内を全て参照して、CSSルールのCSSセレクタマッチング処理が行われる。CSSルールの詳細度を算出して個別のDOM要素に対して、どのようなCSSプロパティが適用されるか判断CSSルールのマッチング処理CSSOMツリーからCSSルールセットを走査、DOMツリーからDOM要素を走査。どんなCSSルールが適用されるのかを計算する。セレクタのマッチングCSSセレクタのマッチング処理は右側から行われる。...}DOM要素のclass属性にbutton親要素のclass属性にcontainer親要素のDOM要素名がbodyレンダリングエンジンはセレクタを右から左に解釈してマッチング処理を行うどのDOM要素に対してどのCSSルールセットが適合するかレンダリングエンジンには分かるようになる。適用されるCSSプロパティの算出DOM要素にどのCSSプロパティと値が適用されるのか算出する。レイアウトDOM要素に当たるCSSプロパティを算出した後、レンダリングエンジンはDOMツリー内のすべてのノードの視覚的なレイアウト情報の計算、レイアウトを行う。-PaintingDOMツリーのレイアウト情報の算出が終わると、レンダリング結果の描画(Painting)。レンダリングエンジンはユーザーが見ることができる実際のピクセルを描画。3つの処理が行われている。Layers)最後のレイヤーの合成が終わることで、ユーザーの目にはレンダリングエンジンが描画した表示になる。ペイント内部の低レベルな2Dグラフィックエンジン向けの命令を生成。Listと呼ばれる内部の低レベルグラフィックエンジンのための命令の列を生成。異なるグラフィックエンジンを組み込めるように設計されている。Skiaが使われている。SkiaはFirefox,Chromeで使われている。ラスタライズ生成された命令を用いて実際にピクセルに描画する。レイヤーごとに一枚一枚描画される。再レンダリングする場合、すでに描画が終わったレイヤーを再利用することで、素早く再レンダリングできる場合がある。レイヤーの合成ピクセルにしたレイヤーを合成して最終的なレンダリング結果を生成する。再レンダリングユーザーやブラウザの何らかのアクションやJavaScriptのコードの実行やドキュメント内のイベントによってレンダリングは再度引き起こされる。全てのレンダリングの処理が最初からやり直しになるわけではない。何が起こっているかわかる限り説明してみてください。(1)はてなブログをはじめよう!cidermitainaさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。