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
8.6k
ペパボ ホスティング事業部のブラウザレンダリング基本知識 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
2.8k
Other Decks in Programming
See All in Programming
JavaScriptツール群「UnJS」を5分で一気に駆け巡る!
k1tikurisu
8
1.3k
自動で //nolint を挿入する取り組み / Gopher's Gathering
utgwkk
1
170
SpringBoot3.4の構造化ログ #kanjava
irof
2
770
ErdMap: Thinking about a map for Rails applications
makicamel
1
1.1k
Spring gRPC について / About Spring gRPC
mackey0225
0
170
オニオンアーキテクチャを使って、 Unityと.NETでコードを共有する
soi013
0
380
CNCF Project の作者が考えている OSS の運営
utam0k
5
620
Оптимизируем производительность блока Казначейство
lamodatech
0
990
HTML/CSS超絶浅い説明
yuki0329
0
210
Scaling your build logic
antalmonori
1
150
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.2k
個人アプリを2年ぶりにアプデしたから褒めて / I just updated my personal app, praise me!
lovee
0
300
Featured
See All Featured
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
The Language of Interfaces
destraynor
156
24k
What's in a price? How to price your products and services
michaelherold
244
12k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
How GitHub (no longer) Works
holman
312
140k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Mobile First: as difficult as doing things right
swwweet
222
9.2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
520
Facilitating Awesome Meetings
lara
51
6.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
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!