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

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

Other Decks in Programming

See All in Programming
ドメインモデリングにおける抽象の役割、tagless-finalによるDSL構築、そして型安全な最適化
Avatar for Kenichi SUZUKI knih
11
2k
Go Modules: From Basics to Beyond / Go Modulesの基本とその先へ
Avatar for kuro kuro_kurorrr
0
120
生成AIコーディングとの向き合い方、AIと共創するという考え方 / How to deal with generative AI coding and the concept of co-creating with AI
Avatar for shiro seike seike460
PRO
1
320
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
Avatar for Yuka O’oka oukayuka
2
820
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
Avatar for hideki kinjyo o0h
PRO
1
120
既存デザインを変更せずにタップ領域を広げる方法
Avatar for Tiphaine tahia910
1
240
エラーって何種類あるの？
Avatar for Takuma Kajikawa kajitack
5
280
GoのWebAssembly活用パターン紹介
Avatar for syumai syumai
3
10k
「Cursor/Devin全社導入の理想と現実」のその後
Avatar for Ryoichi Saito saitoryc
0
110
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
Avatar for shimabox shimabox
1
160
コード書くの好きな人向けAIコーディング活用tips #orestudy
Avatar for Hiromi Hishida 77web
3
330
セキュリティマネジャー廃止とクラウドネイティブ型サンドボックス活用
Avatar for Kenji Kazumura kazumura
1
190

Featured

See All Featured
Code Review Best Practice
Avatar for Trisha Gee trishagee
68
18k
Making Projects Easy
Avatar for Brett Harned brettharned
116
6.3k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
650
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
20
1.3k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
206
24k
Done Done
Avatar for chrislema chrislema
184
16k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
54
13k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
Avatar for Irina Nazarova irinanazarova
8
790
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
228
22k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.6k

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!