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

    View full-size slide

  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

    View full-size slide

  3. Modern Browser Components
    ● Rendering Engine
    ○ HTML/CSS の描画エンジン
    ○ メールクライアント等ブラウザ以外の場面でも利用
    ○ Graphic Engine を利用し画面に描画
    ● JavaScript Engine
    ○ JavaScript の字句解析・パース・AST 生成・最適化・実
    行などの機能を持つ

    View full-size slide

  4. Rendering Engine
    Browser Rendering Engine Graphic Engine
    Google Chrome Blink Skia
    Mozilla Firefox Gecko Skia
    Safari WebKit CoreGraphics
    Microsoft Edge EdgeHTML -> Blink -

    View full-size slide

  5. JavaScript Engine
    Browser JavaScript Engine
    Google Chrome V8
    Mozilla Firefox SpiderMonkey
    Safari JavaScriptCore
    Microsoft Edge Chakra

    View full-size slide

  6. Rendering Process
    ● Loading (Downloading + Parsing)
    ● Scripting
    ● Rendering (Calculating Style + Layout)
    ● Painting (Painting + Rasterizing)

    View full-size slide

  7. Rendering Process
    Loading Scripting Rendering Painting

    View full-size slide

  8. Rendering Process
    Loading Scripting Rendering Painting
    ● Download
    ● Parse
    ● Scripting ● Calculate Style
    ● Layout
    ● Painting
    ● Rasterizing
    ● Composite
    Layers

    View full-size slide

  9. Loading (Download)
    ● 指定された URL から、HTML をダウンロード
    ● HTML に記載されている関連リソースもダウンロード
    ○ CSS
    ○ JavaScript
    ○ Media

    View full-size slide

  10. Loading (Download)
    各リソースを取得するまでの流れ
    ● DNS Lookup
    ● TCP Handshake (3-way handshake)
    ● TLS Handshake (if https://, wss://, etc.)
    ● HTTP Request
    ● HTTP Response

    View full-size slide

  11. Loading (Parse)
    ● HTML or XML および CSS ファイル(バイト文字列)をパー
    スして DOM / CSSOM に変換
    ○ “W3C HTML5 standard” に準拠
    ● 木構造(Nodes, Edges) で表現することでプログラミングし
    やすい
    ○ 探索、クローン、更新といった操作

    View full-size slide

  12. Render Tee
    ● Render Tree
    ○ Document Object Model (DOM)
    ■ <- HTML/XML
    ■ 文書の構造を表現
    ○ CSS Object Model (Model)
    ■ <- CSS
    ■ 文書の見た目を表現

    View full-size slide

  13. Link: Ilya Grigorik, “Constructing the Object Model”, Google Web Fundamentals

    View full-size slide

  14. Link: Ilya Grigorik, “Constructing the Object Model”, Google Web Fundamentals

    View full-size slide

  15. Scripting
    ● JavaScript 実行フェーズ
    ○ Download => JavaScript ファイル(バイト文字列)
    ○ 字句解析 => Token
    ○ 構文解析 => AST
    ○ コンパイル => machine code

    View full-size slide

  16. Rendering (Calculate Style)
    ● DOM の全ての Nodes に対して Style を計算する
    ○ ある特定の Node に対して
    ○ CSSOM を参照し
    ○ 最終的な CSS Properties を計算する

    View full-size slide

  17. Rendering (Calculate Style)

    View full-size slide

  18. CSS Selector Matching
    探索は Right-to-Left / Bottom-to-Top
    ● CSS Selector は Right-to-Left
    ○ 内部表現は Singly Linked List
    ● CSSOM は Bottom-to-Top
    ○ つまり木構造の下側から探索が開始される

    View full-size slide

  19. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”

    View full-size slide

  20. Rendering (Layout)
    ● DOM の各 Nodes に当たる CSS Properties が分かったの
    で、レイアウト情報を決定する
    ○ size / margin / padding / position / z-index

    View full-size slide

  21. Link: Ilya Grigorik, “Render-tree Construction, Layout and Paint”

    View full-size slide

  22. Painting
    ● Render Tree の情報から、利用する Graphic Engine 向け
    の命令を生成する
    ○ ex) Skit は C++ のライブラリなので、C++ ソースコードと
    して命令する

    View full-size slide

  23. Painting (Rasterizing)
    ● Render Tree の情報を、Graphic Engine を利用し、Raster
    Representation に変換する
    ○ 2 次元画像を表現する方式の一つ。Raster はブラウン
    管式のテレビやディスプレーの水平方向の走査線
    ○ いわゆる「Bitmap」

    View full-size slide

  24. @kosamari, “Inside look at modern web browser (part 3)”

    View full-size slide

  25. Metrics
    ● First Paint (FP)
    ● First Meaningful Paint (FMP)
    ● First Contentful Paint (FCP)
    ● DOMContentLoaded (DCL)
    ○ DOM の解析が終了
    ● OnLoad (L)
    ○ 画像などすべてのリソースの読み込みが完了

    View full-size slide

  26. https://cookpad.com Peformance Metrics via Google Chrome

    View full-size slide

  27. Navigatoin Timing API
    ● ブラウザで発生する一連のイベントを取得できる
    ● JavaScript から取得できる
    ● 単位は milliseconds
    ○ 詳細は “DOMHighResTimeStamp” の仕様まで

    View full-size slide

  28. W3C “Navigation Timing” W3C Recommendation 17 December 2012

    View full-size slide

  29. RAIL
    https://developers.google.com/web/fundamentals/performance/rail

    View full-size slide

  30. Shadow DOM
    ● Web の世界に “scope” の概念を導入
    ○ DOM を標準 API レベルで「カプセル化」
    ● メリット
    ○ 実装の詳細を隠蔽できる
    ○ 相互に干渉しあわない styles markup
    ○ vanilla JavaScript で表現できる

    View full-size slide

  31. Shadow DOM
    ● 例えば。。。
    ○ id / className の衝突でレイアウトが壊れない
    ○ 実装の詳細を知らなくても安心して外部コンポーネント
    が利用できる

    View full-size slide

  32. Shadow DOM
    ● 達成できる成果
    ○ チームの責任分界点を意識したフロントエンド開発
    ○ “Microfrontends” ?

    View full-size slide

  33. http://w3c.github.io/webcomponents/spec/shadow/

    View full-size slide

  34. https://caniuse.com/#feat=shadowdomv1

    View full-size slide

  35. DevBytes: Web Components - Shadow Dom
    document
    HTMLElement (shadow host)
    shadow root
    shadow content

    View full-size slide

  36. 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

    View full-size slide

  37. Web Components
    再利用可能な Component based development を実現する一
    連の技術の総称
    ● HTML Templates
    ● HTML Imports
    ● Shadow DOM
    ● Custom Elements

    View full-size slide

  38. https://pwd-minesweeper.netlify.com

    View full-size slide

  39. https://pwd-minesweeper.netlify.com

    View full-size slide

  40. https://pwd-minesweeper.netlify.com

    View full-size slide

  41. Google Chrome Developer Tool

    View full-size slide

  42. MDN web docs “: The Video Embed element”

    View full-size slide

  43. Shadow DOM Terminology
    ● Light Tree
    ○ shadow host 側の Tree(使い手から見える、光)
    ● Shadow Tree
    ○ 使い手から見えない(実装の詳細、影)
    ● Super Tree
    ○ 複数の DOMTree から構成される Tre

    View full-size slide

  44. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”

    View full-size slide

  45. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”

    View full-size slide

  46. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”

    View full-size slide

  47. (再)CSS Selector Matching
    探索は Right-to-Left / Bottom-to-Top
    ● CSS Selector は Right-to-Left
    ○ 内部表現は Singly Linked List
    ● CSSOM は Bottom-to-Top
    ○ つまり木構造の下側から探索が開始される

    View full-size slide

  48. @hayatoito “ブラウザのしくみ: データ構造とアルゴリズムと雰囲気で理解する DOM と Shadow DOM”

    View full-size slide

  49. Web Workers API
    ● Dedicated Worker
    ○ コンテキスト別(タブ別)
    ● Shared Worker
    ○ コンテキスト共有型(タブ間共有)
    ● Service Worker
    ○ ページとは独立して動く JavaScript コンテキスト

    View full-size slide

  50. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”

    View full-size slide

  51. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”

    View full-size slide

  52. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”

    View full-size slide

  53. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”

    View full-size slide

  54. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”

    View full-size slide

  55. @kenju_wagatsuma, “TechBuzz 第17回 HTML5+JS 講演資料”

    View full-size slide

  56. Usage
    ● Canvas を用いた画像処理
    ● 動画や音声の解析処理
    ● IndexedDB API や Web Storage API を用いた処理
    ● その他 heavy load な処理
    ○ スペルチェックなどの構文解析
    ○ JSON や文字列の処理

    View full-size slide

  57. Warning!!!
    ● DOM は触れません
    ○ https://github.com/ampproject/worker-dom などの動きはあります
    ● Memory Usage に注意してください
    ○ worker pool のライブラリは多数あります
    ● データの受け渡し時の空間計算量は意識してください
    ○ postMessage / onmessage のメッセージは clone されます!!!
    ○ ArrayBuffer の所有権 (Transferable Objects) を受け渡す実装が王道
    ■ つまり参照渡し

    View full-size slide

  58. Service Worker
    a.k.a.
    ● “Better AppCache”
    ● “Browser built-in HTTP Proxy”
    ● “Background JavaScript context”

    View full-size slide

  59. Matt Gaunt, “Service Workers: an Introduction”, Google Web Fundamentals

    View full-size slide

  60. Service Worker
    ● Use “Workbox” library for production ready app
    ○ Caching Strategy
    ○ Background Sync API
    ○ Debugging
    ○ Plugins (e.g. Google Analytics, Google Fonts API)

    View full-size slide

  61. https://developers.google.com/web/tools/workbox/

    View full-size slide

  62. https://pwd-minesweeper.netlify.com

    View full-size slide

  63. Resource Hint + Preload
    ● Resource Hint
    ○ dns-prefetch
    ○ preconnect
    ○ prefetch
    ○ prerender
    ● preload

    View full-size slide

  64. 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

    View full-size slide