ペパボホスティング事業部のブラウザレンダリング基本知識 2022 / Browser Rendering Basics of pepabo hosting division

ブラウザレンダリング簡単紹介 1 sangun / GMO PEPABO inc. 2022.06.20 フロントエンド研修

2 自己紹介ホスティング事業部　マーケティングチーム姜相雲 Kang Sang Un さんうんと呼んでください •
韓国から来ました。 • 海が大好きです。 • instagram : sangun.kang

3 アジェンダ 1. ブラウザとは 2. ブラウザのレンダリング 3. DevToolとパフォーマンス

4 1. ブラウザとは

ブラウザとは？ 5 ブラウザとは？ Webサイトにアクセスするためのソフトウェア WebサーバーからもらったHTML,CSS, JS,イメージなどのリソースを出力

ブラウザとは？ 6 我々はWebブラウザを利用して膨大なインターネットのコンテンツを見たり、作ったりしています。

ブラウザとは？ 7 では、我々が見ている様々なコンテンツをブラウザはどう処理しているのかな？

8 2.ブラウザのレンダリング

ブラウザのレンダリング 9 • レンダリングとはHTML、CSS、JavaScriptなどのドキュメントをブラウザで出力する過程。 • ブラウザが画面に表示される要素をレンダリングする際、Webkit や Gecko などのレンダリングエンジンと呼ばれるものを使用する。
レンダリング（Rendering）

10 ブラウザのレンダリングレンダリングの過程は以下の通り 1. リソースのダウンロード 2. リソースをパース 3. レンダーツリー生成 4.
Layout 5. Paint

11 ブラウザのレンダリングリソースのダウンロード • HTML、CSS、JavaScript、画像などをサーバーから取得する

12 ブラウザのレンダリングリソースをパース(構文解析) • HTMLブラウザが理解できる構造に変換する作業 • HTMLをパースしてDOMツリー構造に変更 • CSSをパースしてCSSOMツリー構造に変更 ◦
DOMと似ている構造 • パースの結果はノードと呼ばれ、ノードツリーとなる

13 ブラウザのレンダリングレンダーツリー生成 • 画面に表示するノードだけを含めたツリーを生成する ◦ 画面に表示されないノードは、追加しない(script、metaタグ) ◦ display:noneも追加しない(visibility:hiddenは含まれます) •
各ノードに一致するCSSOMルールを探して適用 • 画面に表示されるノードをコンテンツ及び計算されたスタイルでツリー構築

14 ブラウザのレンダリング

15 ブラウザのレンダリング Layout と Paint • 結果が表示される場所を計算する • 位置、大きさ全部計算する •
ダイナミックな大きさや、％のサイズも全部Pixel(px)に変更 • その後、各ノードを実際の画面に表示する

16 ブラウザのレンダリング Layout と Paint レンダリングの過程で、各要素の正確な位置が計算され、配置されます。

17 ブラウザのレンダリング JavaScript と CSS • jsはHTMLのパースをブロックするリソース(parser blocking resource) ◦
HTMLパースで、JSがある場合、パースを止めてjsをパースする ◦ 結局、レンダリングの速度が遅くなる ◦ 後でロードするか、HTMLパースに影響がないところで宣言する • CSSはレンダリングをブロックするリソース(render blocking resource) ◦ CSSはレンダリングに必ず必要なので、初期段階で必要となる CSSを先に宣言したりする ◦ <head>タグのに定義したり

18 3. DevToolとパフォーマンス

19 DevToolとパフォーマンスブラウザで開発向けで確認やデバッグなど色々を提供する機能

• Elements: HTMLをパースした後のDOM要素 • Console: エラーの情報や意図的に設定されたログ • Sources: ページを表示するために使用した実際のリソース •
Network: リクエストやレスポンスの状況 • Performance: レンダリング速度などサイトの分析結果主に使うのは以下の５つ 20 DevToolとパフォーマンス

21 DevToolとパフォーマンスパフォーマンス • パフォーマンスはWebサイトのレンダリングの過程を分析する機能 • ページのレンダリング完了までの時間やボトルネックになっている部分を視覚化できるイベントログなど、詳細な情報も読み取れるレンダリングの詳細を可視化

22 Thank You! Thank You!

ペパボホスティング事業部のブラウザレンダリング基本知識 2022 / Browser Ren...

ペパボホスティング事業部のブラウザレンダリング基本知識 2022 / Browser Rendering Basics of pepabo hosting division

sangun kang

More Decks by sangun kang

Other Decks in Programming

Featured

Transcript

ブラウザレンダリング簡単紹介 1 sangun / GMO PEPABO inc. 2022.06.20 フロントエンド研修

2 自己紹介ホスティング事業部　マーケティングチーム姜相雲 Kang Sang Un さんうんと呼んでください •

3 アジェンダ 1. ブラウザとは 2. ブラウザのレンダリング 3. DevToolとパフォーマンス

4 1. ブラウザとは

ブラウザとは？ 5 ブラウザとは？ Webサイトにアクセスするためのソフトウェア WebサーバーからもらったHTML,CSS, JS,イメージなどのリソースを出力

ブラウザとは？ 6 我々はWebブラウザを利用して膨大なインターネットのコンテンツを見たり、作ったりしています。

ブラウザとは？ 7 では、我々が見ている様々なコンテンツをブラウザはどう処理しているのかな？

8 2.ブラウザのレンダリング

10 ブラウザのレンダリングレンダリングの過程は以下の通り 1. リソースのダウンロード 2. リソースをパース 3. レンダーツリー生成 4.

11 ブラウザのレンダリングリソースのダウンロード • HTML、CSS、JavaScript、画像などをサーバーから取得する

12 ブラウザのレンダリングリソースをパース(構文解析) • HTMLブラウザが理解できる構造に変換する作業 • HTMLをパースしてDOMツリー構造に変更 • CSSをパースしてCSSOMツリー構造に変更 ◦

13 ブラウザのレンダリングレンダーツリー生成 • 画面に表示するノードだけを含めたツリーを生成する ◦ 画面に表示されないノードは、追加しない(script、metaタグ) ◦ display:noneも追加しない(visibility:hiddenは含まれます) •

14 ブラウザのレンダリング

15 ブラウザのレンダリング Layout と Paint • 結果が表示される場所を計算する • 位置、大きさ全部計算する •

16 ブラウザのレンダリング Layout と Paint レンダリングの過程で、各要素の正確な位置が計算され、配置されます。

17 ブラウザのレンダリング JavaScript と CSS • jsはHTMLのパースをブロックするリソース(parser blocking resource) ◦

18 3. DevToolとパフォーマンス

19 DevToolとパフォーマンスブラウザで開発向けで確認やデバッグなど色々を提供する機能

• Elements: HTMLをパースした後のDOM要素 • Console: エラーの情報や意図的に設定されたログ • Sources: ページを表示するために使用した実際のリソース •

22 Thank You! Thank You!

ペパボ ホスティング事業部のブラウザレンダリング基本知識 2022 / Browser Ren...

ペパボ ホスティング事業部のブラウザレンダリング基本知識 2022 / Browser Rendering Basics of pepabo hosting division

More Decks by sangun kang

Other Decks in Programming

Featured

Transcript

ペパボホスティング事業部のブラウザレンダリング基本知識 2022 / Browser Ren...

ペパボホスティング事業部のブラウザレンダリング基本知識 2022 / Browser Rendering Basics of pepabo hosting division