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.1k
Other Decks in Programming
See All in Programming
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
330
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
650
Deep Dive into ~/.claude/projects
hiragram
14
2.5k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
440
AIエージェントはこう育てる - GitHub Copilot Agentとチームの共進化サイクル
koboriakira
0
590
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
Azure AI Foundryではじめてのマルチエージェントワークフロー
seosoft
0
170
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
5.5k
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
700
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
120
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Adopting Sorbet at Scale
ufuk
77
9.5k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
A Tale of Four Properties
chriscoyier
160
23k
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!