Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Avatar for sangun kang sangun kang
November 21, 2022
Programming
0
9.2k

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

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

Avatar for sangun kang

sangun kang

November 21, 2022
Tweet

More Decks by sangun kang

See All by sangun kang
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
Avatar for sangun kang sangunkang
0
3.2k

Other Decks in Programming

See All in Programming
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
Avatar for tk1351 tk1351
3
1.3k
AIコーディングAgentとの向き合い方
Avatar for kmuto eycjur
0
240
物語を動かす行動"量" #エンジニアニメ
Avatar for konifar konifar
14
5.5k
tool ディレクティブを導入してみた感想
Avatar for Sugar Sato sgash708
1
150
「リーダーは意思決定する人」って本当？～ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ～
Avatar for Marina Nakagawa marina1017
0
240
デザインシステムが必須の時代に
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
2
110
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
Avatar for Mirrativ mirrativ
2
270
令和最新版手のひらコンピュータ
Avatar for KOBA789 koba789
14
8k
AIエージェント開発、DevOps and LLMOps
Avatar for Kento.Yamada ymd65536
1
350
AIレビュアーをスケールさせるには / Scaling AI Reviewers
Avatar for technuma technuma
2
230
私の後悔をAWS DMSで解決した話
Avatar for 平目 hiramax
4
150
モバイルアプリからWebへの横展開を加速した話_Claude_Code_実践術.pdf
Avatar for Kazuya Sakamoto kazuyasakamoto
0
280

Featured

See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
The Psychology of Web Performance [Beyond Tellerrand 2023]
Avatar for Tammy Everts tammyeverts
49
3k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
2
590
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.5k
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
48
50k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1031
460k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
301
51k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
29
1.9k

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!