Moden browser introduction

Transcript

1. ブラウザの気持ち勉強会 Kenju Wagatsuma Cookpad Inc. August 22th, 2019
2. Elementary • Modern Browser Components ◦ Rendering Engine ◦ JavaScript Engine • Rendering Process ◦ Loading (Downloading + Parsing) ◦ Scripting ◦ Rendering (Calculating Style + Layout) ◦ Painting (Painting + Rasterizing) • Render Tree ◦ Document Object Model (DOM) ◦ CSS Object Model (CSSOM) • Metrics ◦ Time-To-First-Byte (TTFB) ◦ First Meaningful Paint (FMP) ◦ First Contentful Paint (FCP) • iframe • Shadow DOM ◦ Super Tree ◦ Light Tree & Shadow Tree ◦ Divide and Conquer ◦ CSS Selector Matching ◦ Incremental Shadow DOM • Web Workers API ◦ Web Worker ◦ Service Worker • Resource Hint ◦ preload ◦ preconnect ◦ prefetch Advanced
3. Elementary
4. Modern Browser Components • Rendering Engine ◦ HTML/CSS の描画エンジン ◦ メールクライアント等ブラウザ以外の場面でも利用 ◦ Graphic Engine を利用し画面に描画 • JavaScript Engine ◦ JavaScript の字句解析・パース・AST 生成・最適化・実 行などの機能を持つ
5. Rendering Engine Browser Rendering Engine Graphic Engine Google Chrome Blink Skia Mozilla Firefox Gecko Skia Safari WebKit CoreGraphics Microsoft Edge EdgeHTML -> Blink -
6. JavaScript Engine Browser JavaScript Engine Google Chrome V8 Mozilla Firefox SpiderMonkey Safari JavaScriptCore Microsoft Edge Chakra
7. Rendering Process • Loading (Downloading + Parsing) • Scripting • Rendering (Calculating Style + Layout) • Painting (Painting + Rasterizing)
8. Rendering Process Loading Scripting Rendering Painting
9. Rendering Process Loading Scripting Rendering Painting • Download • Parse • Scripting • Calculate Style • Layout • Painting • Rasterizing • Composite Layers
10. Loading (Download) • 指定された URL から、HTML をダウンロード • HTML に記載されている関連リソースもダウンロード ◦ CSS ◦ JavaScript ◦ Media
11. Loading (Download) 各リソースを取得するまでの流れ • DNS Lookup • TCP Handshake (3-way handshake) • TLS Handshake (if https://, wss://, etc.) • HTTP Request • HTTP Response
12. Loading (Parse) • HTML or XML および CSS ファイル（バイト文字列）をパー スして DOM / CSSOM に変換 ◦ “W3C HTML5 standard” に準拠 • 木構造（Nodes, Edges) で表現することでプログラミングし やすい ◦ 探索、クローン、更新といった操作
13. Render Tee • Render Tree ◦ Document Object Model (DOM) ▪ <- HTML/XML ▪ 文書の構造を表現 ◦ CSS Object Model (Model) ▪ <- CSS ▪ 文書の見た目を表現
14. Link: Ilya Grigorik, “Constructing the Object Model”, Google Web Fundamentals
15. Link: Ilya Grigorik, “Constructing the Object Model”, Google Web Fundamentals
16. Scripting • JavaScript 実行フェーズ ◦ Download => JavaScript ファイル（バイト文字列） ◦ 字句解析 => Token ◦ 構文解析 => AST ◦ コンパイル => machine code
17. Rendering (Calculate Style) • DOM の全ての Nodes に対して Style を計算する ◦ ある特定の Node に対して ◦ CSSOM を参照し ◦ 最終的な CSS Properties を計算する
18. Rendering (Calculate Style)
19. CSS Selector Matching 探索は Right-to-Left / Bottom-to-Top • CSS Selector は Right-to-Left ◦ 内部表現は Singly Linked List • CSSOM は Bottom-to-Top ◦ つまり木構造の下側から探索が開始される
20. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”
21. Rendering (Layout) • DOM の各 Nodes に当たる CSS Properties が分かったの で、レイアウト情報を決定する ◦ size / margin / padding / position / z-index
22. Link: Ilya Grigorik, “Render-tree Construction, Layout and Paint”
23. Painting • Render Tree の情報から、利用する Graphic Engine 向け の命令を生成する ◦ ex) Skit は C++ のライブラリなので、C++ ソースコードと して命令する
24. Painting (Rasterizing) • Render Tree の情報を、Graphic Engine を利用し、Raster Representation に変換する ◦ 2 次元画像を表現する方式の一つ。Raster はブラウン 管式のテレビやディスプレーの水平方向の走査線 ◦ いわゆる「Bitmap」
25. @kosamari, “Inside look at modern web browser (part 3)”
26. Metrics • First Paint (FP) • First Meaningful Paint (FMP) • First Contentful Paint (FCP) • DOMContentLoaded (DCL) ◦ DOM の解析が終了 • OnLoad (L) ◦ 画像などすべてのリソースの読み込みが完了
27. https://cookpad.com Peformance Metrics via Google Chrome
28. Navigatoin Timing API • ブラウザで発生する一連のイベントを取得できる • JavaScript から取得できる • 単位は milliseconds ◦ 詳細は “DOMHighResTimeStamp” の仕様まで
29. W3C “Navigation Timing” W3C Recommendation 17 December 2012
30. RAIL https://developers.google.com/web/fundamentals/performance/rail
31. Advanced
32. Shadow DOM • Web の世界に “scope” の概念を導入 ◦ DOM を標準 API レベルで「カプセル化」 • メリット ◦ 実装の詳細を隠蔽できる ◦ 相互に干渉しあわない styles markup ◦ vanilla JavaScript で表現できる
33. Shadow DOM • 例えば。。。 ◦ id / className の衝突でレイアウトが壊れない ◦ 実装の詳細を知らなくても安心して外部コンポーネント が利用できる
34. Shadow DOM • 達成できる成果 ◦ チームの責任分界点を意識したフロントエンド開発 ◦ “Microfrontends” ?
35. http://w3c.github.io/webcomponents/spec/shadow/
36. https://caniuse.com/#feat=shadowdomv1
37. DevBytes: Web Components - Shadow Dom document HTMLElement (shadow host) shadow root shadow content
38. Shadow DOM • Browser support check ◦ const supportsShadowDOMV1 = !!HTMLElement.prototype.attachShadow; • Polyfill あり ◦ https://github.com/webcomponents/polyfills/tree/master/packages/shadydom ◦ https://github.com/webcomponents/polyfills/tree/master/packages/shadycss
39. Web Components 再利用可能な Component based development を実現する一 連の技術の総称 • HTML Templates • HTML Imports • Shadow DOM • Custom Elements
40. https://pwd-minesweeper.netlify.com
41. https://pwd-minesweeper.netlify.com
42. https://pwd-minesweeper.netlify.com
43. Google Chrome Developer Tool
44. MDN web docs “<video>: The Video Embed element”
45. Shadow DOM Terminology • Light Tree ◦ shadow host 側の Tree（使い手から見える、光） • Shadow Tree ◦ 使い手から見えない（実装の詳細、影） • Super Tree ◦ 複数の DOMTree から構成される Tre
46. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”
47. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”
48. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”
49. （再）CSS Selector Matching 探索は Right-to-Left / Bottom-to-Top • CSS Selector は Right-to-Left ◦ 内部表現は Singly Linked List • CSSOM は Bottom-to-Top ◦ つまり木構造の下側から探索が開始される
50. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”
51. Web Workers API • Dedicated Worker ◦ コンテキスト別（タブ別） • Shared Worker ◦ コンテキスト共有型（タブ間共有） • Service Worker ◦ ページとは独立して動く JavaScript コンテキスト
52. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”
53. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”
54. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”
55. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”
56. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”
57. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”
58. Usage • Canvas を用いた画像処理 • 動画や音声の解析処理 • IndexedDB API や Web Storage API を用いた処理 • その他 heavy load な処理 ◦ スペルチェックなどの構文解析 ◦ JSON や文字列の処理
59. Warning!!! • DOM は触れません ◦ https://github.com/ampproject/worker-dom などの動きはあります • Memory Usage に注意してください ◦ worker pool のライブラリは多数あります • データの受け渡し時の空間計算量は意識してください ◦ postMessage / onmessage のメッセージは clone されます!!! ◦ ArrayBuffer の所有権 (Transferable Objects) を受け渡す実装が王道 ▪ つまり参照渡し
60. Service Worker a.k.a. • “Better AppCache” • “Browser built-in HTTP Proxy” • “Background JavaScript context”
61. Matt Gaunt, “Service Workers: an Introduction”, Google Web Fundamentals
62. Service Worker • Use “Workbox” library for production ready app ◦ Caching Strategy ◦ Background Sync API ◦ Debugging ◦ Plugins (e.g. Google Analytics, Google Fonts API)
63. https://developers.google.com/web/tools/workbox/
64. https://pwd-minesweeper.netlify.com
65. Resource Hint + Preload • Resource Hint ◦ dns-prefetch ◦ preconnect ◦ prefetch ◦ prerender • preload
66. Refereces • 久保田 光則『Webフロントエンド ハイパフォーマンス チューニング』 • @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM” • @nhiroki “Service Worker スクリプトのインストールと更新処理” • @kosamari “Inside look at modern web browser (part 1 ~ 4)” • Ilya Grigorik “Constructing the Object Model”, Google Web Fundamentals • Ilya Grigorik “Render-tree Construction, Layout, and Paint”, Google Web Fundamentals • Eric Bidelman, “Shadow DOM v1: Self-Contained Web Components”, Google Web Fundamentals • Matt Gaunt, “Service Workers: an Introduction”, Google Web Fundamentals • W3C “Navigation Timing” W3C Recommendation 17 December 2012 • 69log, “resouce hintsとpreloadを使ってリソースの取得を最適化する” • hayato@google.com, “Incremental Shadow DOM” • Kenju “Web Workers +α” http://bit.ly/2ZhpMCB
67. Thank you!