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.7k

ペパボ ホスティング事業部のブラウザレンダリング基本知識 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.5k

Other Decks in Programming

See All in Programming
AI巻き込み型コードレビューのススメ
Avatar for Nealle nealle
2
2.3k
2025年の活動の振り返り
Avatar for Hideyuki Nagata hideg
0
120
CSC307 Lecture 13
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
受け入れテスト駆動開発(ATDD)×AI駆動開発 AI時代のATDDの取り組み方を考える
Avatar for Takasaki Kazunari kztakasaki
2
430
文字コードの話
Avatar for Masaki Hara qnighy
41
15k
AI & Enginnering
Avatar for codelynx codelynx
0
140
AIに仕事を丸投げしたら、本当に楽になれるのか
Avatar for ディップ株式会社 dip_tech
PRO
0
160
個人開発は儲からない - それでも開発開始1ヶ月で300万円売り上げた方法
Avatar for Taishi Yamasaki taishiyade
0
110
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
1.1k
今更考える「単一責任原則」 / Thinking about the Single Responsibility Principle
Avatar for philomagi tooppoo
2
940
Rubyと楽しいをつくる / Creating joy with Ruby
Avatar for chobishiba chobishiba
0
190
Rails Girls Tokyo 18th GMO Pepabo Sponsor Talk
Avatar for Yuto Kondo yutokyokutyo
0
170

Featured

See All Featured
Design of three-dimensional binary manipulators for pick-and-place task avoiding obstacles (IECON2024)
Avatar for konakalab konakalab
0
360
Ruling the World: When Life Gets Gamed
Avatar for Sebastian Deterding codingconduct
0
160
How To Speak Unicorn (iThemes Webinar)
Avatar for Michelle Schulp Hunt marktimemedia
1
400
Groundhog Day: Seeking Process in Gaming for Health
Avatar for Sebastian Deterding codingconduct
0
110
The State of eCommerce SEO: How to Win in Today's Products SERPs - #SEOweek
Avatar for Aleyda Solis aleyda
2
9.7k
Leveraging LLMs for student feedback in introductory data science courses - posit::conf(2025)
Avatar for Mine Cetinkaya-Rundel minecr
1
180
Navigating Algorithm Shifts & AI Overviews - #SMXNext
Avatar for Aleyda Solis aleyda
1
1.1k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
162
24k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
Avatar for Yuki Nakata chikuwait chikuwait
0
370
Conquering PDFs: document understanding beyond plain text
Avatar for Ines Montani inesmontani
PRO
4
2.4k

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!