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

GMOペパボ新卒研修ーブラウザレンダリング基本知識

Transcript

1. ブラウザレンダリング簡単紹介 1 sangun / GMO PEPABO inc. 2022.06.20 フロントエンド研修
2. 2 自己紹介 ホスティング事業部　マーケティングチーム 姜 相雲 Kang Sang Un さんうんと呼んでください • 韓国から来ました。 • 海が大好きです。 • instagram : sangun.kang
3. 3 アジェンダ 1. ブラウザとは 2. ブラウザのレンダリング 3. DevToolとパフォーマンス
4. 4 1. ブラウザとは
5. ブラウザとは？ 5 ブラウザとは？ Webサイトにアクセスするためのソフトウェア WebサーバーからもらったHTML,CSS, JS,イメージなどのリソースを出力
6. ブラウザとは？ 6 我々はWebブラウザを利用して 膨大なインターネットのコンテンツを見たり、作ったりしています。
7. ブラウザとは？ 7 では、我々が見ている様々な コンテンツをブラウザは どう処理しているのかな？
8. 8 2.ブラウザのレンダリング
9. ブラウザのレンダリング 9 • レンダリングとはHTML、CSS、JavaScriptなどのドキュメントをブラウ ザで出力する過程。 • ブラウザが画面に表示される要素をレンダリングする際、Webkit や Gecko などのレンダリングエンジンと呼ばれるものを使用する。 レンダリング（Rendering）
10. 10 ブラウザのレンダリング レンダリングの過程は以下の通り 1. リソースのダウンロード 2. リソースをパース 3. レンダーツリー生成 4. Layout 5. Paint
11. 11 ブラウザのレンダリング リソースのダウンロード • HTML、CSS、JavaScript、画像などをサーバーから取得する
12. 12 ブラウザのレンダリング リソースをパース(構文解析) • HTMLブラウザが理解できる構造に変換する作業 • HTMLをパースしてDOMツリー構造に変更 • CSSをパースしてCSSOMツリー構造に変更 ◦ DOMと似ている構造 • パースの結果はノードと呼ばれ、ノードツリーとなる
13. 13 ブラウザのレンダリング レンダーツリー生成 • 画面に表示するノードだけを含めたツリーを生成する ◦ 画面に表示されないノードは、追加しない(script、metaタグ) ◦ display:noneも追加しない(visibility:hiddenは含まれます) • 各ノードに一致するCSSOMルールを探して適用 • 画面に表示されるノードをコンテンツ及び計算されたスタイルでツ リー構築
14. 14 ブラウザのレンダリング
15. 15 ブラウザのレンダリング Layout と Paint • 結果が表示される場所を計算する • 位置、大きさ全部計算する • ダイナミックな大きさや、％のサイズも全部Pixel(px)に変更 • その後、各ノードを実際の画面に表示する
16. 16 ブラウザのレンダリング Layout と Paint レンダリングの過程で、各要素の正確な位置が計算され、配置されます。
17. 17 ブラウザのレンダリング JavaScript と CSS • jsはHTMLのパースをブロックするリソース(parser blocking resource) ◦ HTMLパースで、JSがある場合、パースを止めてjsをパースする ◦ 結局、レンダリングの速度が遅くなる ◦ 後でロードするか、HTMLパースに影響がないところで宣言する • CSSはレンダリングをブロックするリソース(render blocking resource) ◦ CSSはレンダリングに必ず必要なので、初期段階で必要となる CSSを先に宣言したりする ◦ <head>タグのに定義したり
18. 18 3. DevToolとパフォーマンス
19. 19 DevToolとパフォーマンス ブラウザで開発向けで確認やデバッグなど色々を提供する機能
20. • Elements: HTMLをパースした後のDOM要素 • Console: エラーの情報や意図的に設定されたログ • Sources: ページを表示するために使用した実際のリソース • Network: リクエストやレスポンスの状況 • Performance: レンダリング速度などサイトの分析結果 主に使うのは以下の５つ 20 DevToolとパフォーマンス
21. 21 DevToolとパフォーマンス パフォーマンス • パフォーマンスはWebサイトのレンダリングの過程を分析する機能 • ページのレンダリング完了までの時間やボトルネックになっている部分を視覚化できる イベントログなど、詳細な情報も読み取れる レンダリングの詳細を可視化
22. 22 Thank You! Thank You!