Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ペパボ ホスティング事業部のブラウザレンダリング基本知識 2022 / Browser Ren...
Search
sangun kang
November 21, 2022
Programming
0
9.1k
ペパボ ホスティング事業部のブラウザレンダリング基本知識 2022 / Browser Rendering Basics of pepabo hosting division
GMOペパボ新卒研修ーブラウザレンダリング基本知識
sangun kang
November 21, 2022
Tweet
Share
More Decks by sangun kang
See All by sangun kang
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
3.2k
Other Decks in Programming
See All in Programming
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
7
2.4k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1.1k
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
150
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
270
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
760
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
260
RailsGirls IZUMO スポンサーLT
16bitidol
0
200
PipeCDのプラグイン化で目指すところ
warashi
1
300
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
240
Claude Code派?Gemini CLI派? みんなで比較LT会!_20250716
junholee
1
530
NEWT Backend Evolution
xpromx
1
140
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
108
19k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Gamification - CAS2011
davidbonilla
81
5.4k
GitHub's CSS Performance
jonrohan
1031
460k
Speed Design
sergeychernyshev
32
1k
How STYLIGHT went responsive
nonsquared
100
5.6k
Scaling GitHub
holman
460
140k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
4 Signs Your Business is Dying
shpigford
184
22k
Six Lessons from altMBA
skipperchong
28
3.9k
Transcript
ブラウザレンダリング簡単紹介 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: レンダリング速度などサイトの分析結果 主に使うのは以下の5つ 20 DevToolとパフォーマンス
21 DevToolとパフォーマンス パフォーマンス • パフォーマンスはWebサイトのレンダリングの過程を分析する機能 • ページのレンダリング完了までの時間やボトルネックになっている部分を視覚化できる イベントログなど、詳細な情報も読み取れる レンダリングの詳細を可視化
22 Thank You! Thank You!