Moden browser introduction

Moden browser introduction

3b36493b4296ebeb219bcd3ffab3aa2b?s=128

Kenju Wagatsuma

August 30, 2019
Tweet

Transcript

  1. 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
  2. 4.

    Modern Browser Components • Rendering Engine ◦ HTML/CSS の描画エンジン ◦

    メールクライアント等ブラウザ以外の場面でも利用 ◦ Graphic Engine を利用し画面に描画 • JavaScript Engine ◦ JavaScript の字句解析・パース・AST 生成・最適化・実 行などの機能を持つ
  3. 5.

    Rendering Engine Browser Rendering Engine Graphic Engine Google Chrome Blink

    Skia Mozilla Firefox Gecko Skia Safari WebKit CoreGraphics Microsoft Edge EdgeHTML -> Blink -
  4. 6.

    JavaScript Engine Browser JavaScript Engine Google Chrome V8 Mozilla Firefox

    SpiderMonkey Safari JavaScriptCore Microsoft Edge Chakra
  5. 7.

    Rendering Process • Loading (Downloading + Parsing) • Scripting •

    Rendering (Calculating Style + Layout) • Painting (Painting + Rasterizing)
  6. 9.

    Rendering Process Loading Scripting Rendering Painting • Download • Parse

    • Scripting • Calculate Style • Layout • Painting • Rasterizing • Composite Layers
  7. 11.

    Loading (Download) 各リソースを取得するまでの流れ • DNS Lookup • TCP Handshake (3-way

    handshake) • TLS Handshake (if https://, wss://, etc.) • HTTP Request • HTTP Response
  8. 12.

    Loading (Parse) • HTML or XML および CSS ファイル(バイト文字列)をパー スして

    DOM / CSSOM に変換 ◦ “W3C HTML5 standard” に準拠 • 木構造(Nodes, Edges) で表現することでプログラミングし やすい ◦ 探索、クローン、更新といった操作
  9. 13.

    Render Tee • Render Tree ◦ Document Object Model (DOM)

    ▪ <- HTML/XML ▪ 文書の構造を表現 ◦ CSS Object Model (Model) ▪ <- CSS ▪ 文書の見た目を表現
  10. 16.

    Scripting • JavaScript 実行フェーズ ◦ Download => JavaScript ファイル(バイト文字列) ◦

    字句解析 => Token ◦ 構文解析 => AST ◦ コンパイル => machine code
  11. 17.

    Rendering (Calculate Style) • DOM の全ての Nodes に対して Style を計算する

    ◦ ある特定の Node に対して ◦ CSSOM を参照し ◦ 最終的な CSS Properties を計算する
  12. 19.

    CSS Selector Matching 探索は Right-to-Left / Bottom-to-Top • CSS Selector

    は Right-to-Left ◦ 内部表現は Singly Linked List • CSSOM は Bottom-to-Top ◦ つまり木構造の下側から探索が開始される
  13. 21.

    Rendering (Layout) • DOM の各 Nodes に当たる CSS Properties が分かったの

    で、レイアウト情報を決定する ◦ size / margin / padding / position / z-index
  14. 23.

    Painting • Render Tree の情報から、利用する Graphic Engine 向け の命令を生成する ◦

    ex) Skit は C++ のライブラリなので、C++ ソースコードと して命令する
  15. 24.

    Painting (Rasterizing) • Render Tree の情報を、Graphic Engine を利用し、Raster Representation に変換する

    ◦ 2 次元画像を表現する方式の一つ。Raster はブラウン 管式のテレビやディスプレーの水平方向の走査線 ◦ いわゆる「Bitmap」
  16. 26.

    Metrics • First Paint (FP) • First Meaningful Paint (FMP)

    • First Contentful Paint (FCP) • DOMContentLoaded (DCL) ◦ DOM の解析が終了 • OnLoad (L) ◦ 画像などすべてのリソースの読み込みが完了
  17. 31.
  18. 32.

    Shadow DOM • Web の世界に “scope” の概念を導入 ◦ DOM を標準

    API レベルで「カプセル化」 • メリット ◦ 実装の詳細を隠蔽できる ◦ 相互に干渉しあわない styles markup ◦ vanilla JavaScript で表現できる
  19. 33.

    Shadow DOM • 例えば。。。 ◦ id / className の衝突でレイアウトが壊れない ◦

    実装の詳細を知らなくても安心して外部コンポーネント が利用できる
  20. 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
  21. 45.

    Shadow DOM Terminology • Light Tree ◦ shadow host 側の

    Tree(使い手から見える、光) • Shadow Tree ◦ 使い手から見えない(実装の詳細、影) • Super Tree ◦ 複数の DOMTree から構成される Tre
  22. 49.

    (再)CSS Selector Matching 探索は Right-to-Left / Bottom-to-Top • CSS Selector

    は Right-to-Left ◦ 内部表現は Singly Linked List • CSSOM は Bottom-to-Top ◦ つまり木構造の下側から探索が開始される
  23. 51.

    Web Workers API • Dedicated Worker ◦ コンテキスト別(タブ別) • Shared

    Worker ◦ コンテキスト共有型(タブ間共有) • Service Worker ◦ ページとは独立して動く JavaScript コンテキスト
  24. 58.

    Usage • Canvas を用いた画像処理 • 動画や音声の解析処理 • IndexedDB API や

    Web Storage API を用いた処理 • その他 heavy load な処理 ◦ スペルチェックなどの構文解析 ◦ JSON や文字列の処理
  25. 59.

    Warning!!! • DOM は触れません ◦ https://github.com/ampproject/worker-dom などの動きはあります • Memory Usage

    に注意してください ◦ worker pool のライブラリは多数あります • データの受け渡し時の空間計算量は意識してください ◦ postMessage / onmessage のメッセージは clone されます!!! ◦ ArrayBuffer の所有権 (Transferable Objects) を受け渡す実装が王道 ▪ つまり参照渡し
  26. 60.

    Service Worker a.k.a. • “Better AppCache” • “Browser built-in HTTP

    Proxy” • “Background JavaScript context”
  27. 62.

    Service Worker • Use “Workbox” library for production ready app

    ◦ Caching Strategy ◦ Background Sync API ◦ Debugging ◦ Plugins (e.g. Google Analytics, Google Fonts API)
  28. 65.

    Resource Hint + Preload • Resource Hint ◦ dns-prefetch ◦

    preconnect ◦ prefetch ◦ prerender • preload
  29. 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