Moden browser introduction

Moden browser introduction

3b36493b4296ebeb219bcd3ffab3aa2b?s=128

Kenju Wagatsuma

August 30, 2019
Tweet

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!