Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Moden browser introduction

Moden browser introduction

Ken Wagatsuma

August 30, 2019
Tweet

More Decks by Ken Wagatsuma

Other Decks in Programming

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を使ってリソースの取得を最適化する” • [email protected], “Incremental Shadow DOM” • Kenju “Web Workers +α” http://bit.ly/2ZhpMCB
  67. Thank you!