ブラウザの気持ち勉強会 Kenju Wagatsuma Cookpad Inc. August 22th, 2019 

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 

Elementary 

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

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

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

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

Rendering Process Loading Scripting Rendering Painting 

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

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

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

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

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

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

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

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

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

Rendering (Calculate Style) 

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

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

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

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

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

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

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

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

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

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

W3C “Navigation Timing” W3C Recommendation 17 December 2012 

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

Advanced 

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

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

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

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

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

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

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 

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

https://pwd-minesweeper.netlify.com 

https://pwd-minesweeper.netlify.com 

https://pwd-minesweeper.netlify.com 

Google Chrome Developer Tool 

MDN web docs “: The Video Embed element” 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

https://pwd-minesweeper.netlify.com 

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

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 

Thank you!