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
10k
0

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

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

Avatar for sangun kang

sangun kang

November 21, 2022

More Decks by sangun kang

See All by sangun kang
AIは無限にレビューを書く。 俺の脳みそは1個しかない
Avatar for sangun kang sangunkang
0
36
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
Avatar for sangun kang sangunkang
0
3.6k

Other Decks in Programming

See All in Programming
AI がコードを書く時代における新卒エンジニアの仕事風景 (2026) / New Graduate Engineers in the Era of AI Coding (2026)
Avatar for sushichan044 sushichan044
0
180
ローカルLLMでどこまでコードが書けるか -拡張版 /　How much code can be written on a local LLM Extended
Avatar for Naoki Kishida kishida
12
4.6k
Oxlintのカスタムルールの現況
Avatar for syumai syumai
6
1.2k
AI駆動開発を妨げる技術的負債の解消アプローチ / ai-refactoring-approach
Avatar for MinoDriven minodriven
17
8.3k
任せる範囲はこう広がった / How the Scope of AI Delegation Has Expanded
Avatar for nrs nrslib
1
220
AI 輔助遺留系統現代化的經驗分享
Avatar for James Wang jame2408
1
1.1k
Language Server 使ってる？ 〜VSCode と Zed の場合〜 / Are you using a Language Server? ~For VS Code and Zed~
Avatar for NAGATA Hiroaki handlename
0
820
TAKTでAI駆動開発の品質を設計する
Avatar for かとじゅん j5ik2o
7
1.6k
技術的負債解消で開発者の未来を開く- AIの力でコード刷新
Avatar for Kato Ryo kmd2kmd
0
140
dRuby over BLE
Avatar for makicamel makicamel
2
400
どこまでゆるくて許されるのか
Avatar for tk3fftk tk3fftk
0
290
トークンをケチるな、設計しろ：GitHub Copilotを賢く使うコンテキスト戦略
Avatar for Ochtum ochtum
0
270

Featured

See All Featured
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
23k
The Organizational Zoo: Understanding Human Behavior Agility Through Metaphoric Constructive Conversations (based on the works of Arthur Shelley, Ph.D)
Avatar for Dr. Kim W Petersen kimpetersen
PRO
0
380
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
72
12k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
sira's awesome portfolio website redesign presentation
Avatar for ElsiraPls elsirapls
0
290
Between Models and Reality
Avatar for mayunak mayunak
4
360
Stewardship and Sustainability of Urban and Community Forests
Avatar for Eric Wiseman pwiseman
0
240
Leading Effective Engineering Teams in the AI Era
Avatar for Addy Osmani addyosmani
9
2.1k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
220
Fireside Chat
Avatar for paigeccino paigeccino
42
4k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
360

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!