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.2k
ペパボ ホスティング事業部のブラウザレンダリング基本知識 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
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
2
760
リッチエディターを安全に開発・運用するために
unachang113
1
350
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
710
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
7
1.9k
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
AIのメモリー
watany
12
1.3k
マイコンでもRustのtestがしたい その2/KernelVM Tokyo 18
tnishinaga
0
170
202507_ADKで始めるエージェント開発の基本 〜デモを通じて紹介〜(奥田りさ)The Basics of Agent Development with ADK — A Demo-Focused Introduction
risatube
PRO
6
1.4k
QA x AIエコシステム段階構築作戦
osu
0
240
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
220
GUI操作LLMの最新動向: UI-TARSと関連論文紹介
kfujikawa
0
510
一人でAIプロダクトを作るための工夫 〜技術選定・開発プロセス編〜 / I want AI to work harder
rkaga
4
450
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Code Reviewing Like a Champion
maltzj
524
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Docker and Python
trallard
45
3.5k
Faster Mobile Websites
deanohume
308
31k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
A Tale of Four Properties
chriscoyier
160
23k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
A Modern Web Designer's Workflow
chriscoyier
695
190k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
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!