レンダリングを探訪する

LT書き起こし記事:
https://zenn.dev/yoshikouki/articles/explore-rendering

当資料はさくらじまハウス 2024 で登壇したLT資料です
https://www.sakurajima-house.tech/

引用
- https://developer.chrome.com/docs/chromium
- https://developer.chrome.com/blog/inside-browser-part1

Transcript

1. レンダリングを探訪する GMOペパボ 事業開発部 鹿児島エンジニアリングチーム yoshikouki
2. • 新規事業の開発業務にいくつかかかわる Alive Project / GMOレンシュ 等... • 推しは Hono × Bun • 前職は職員30名の介護保険施設で家族経営 • 悩みは娘の寝相による睡眠妨害 吉本 康貴 よしこ GMOペパボ 株式会社 事業開発部 鹿児島エンジニアリングチーム
4. ブラウザ レンダリングエンジン JavaScript エンジン シェア Chrome Blink V8 65.72% Safari WebKit JavaScriptCore 18.22% Firefox Gecko SpiderMonkey 2.71% Edge, Opera 他 Blink V8 ~ 5.31% iOS 系ブラウザ WebKit JavaScriptCore 18.13% ? Mobile Browser Market Share Worldwide | Statcounter Global Stats iOS系ブラウザはiOS のシェアを表示
5. ブラウザ レンダリングエンジン JavaScript エンジン シェア Chrome Blink V8 65.72% Safari WebKit JavaScriptCore 18.22% Firefox Gecko SpiderMonkey 2.71% Edge, Opera 他 Blink V8 ~ 5.31% iOS 系ブラウザ WebKit JavaScriptCore 18.13% ? Mobile Browser Market Share Worldwide | Statcounter Global Stats iOS系ブラウザはiOS のシェアを表示
6. Paint Layout Style Parse ブ ラ ウ ザ レ ン ダ リ ン グ ？
7. Paint Layout Style ブ ラ ウ ザ レ ン ダ リ ン グ Parse RenderingNG | Chromium | Chrome for Developers
8. RenderingNG | Chromium | Chrome for Developers
9. レンダリングパイプライン RenderingNG architecture | Chromium | Chrome for Developers
10. レンダリングパイプライン RenderingNG architecture | Chromium | Chrome for Developers Stage ≒ レンダリングのタスク (またはそのコード)
11. レンダリングパイプライン RenderingNG architecture | Chromium | Chrome for Developers Stage ≒ レンダリングのタスク (またはそのコード) Artifacts ≒ 各ステージの入出力 (またはそのデータ構造)
12. レンダリングパイプライン RenderingNG architecture | Chromium | Chrome for Developers ステージは、どのスレッドや プロセスを実行するかを示すた めに、色で表記される。 場合によっては、ステージは状 況に応じて複数の場所で実行 されることがあり、そのため2つ の色を持つものもある。 Render process Main Thread Render process Compositors Thread Viz Process
13. RenderingNG | Chromium | Chrome for Developers Render process Main Thread Render process Compositors Thread Viz Process
14. RenderingNG | Chromium | Chrome for Developers Render process Main Thread Render process Compositors Thread Viz Process
15. RenderingNG | Chromium | Chrome for Developers Render process Main Thread Render process Compositors Thread Viz Process
16. RenderingNG architecture | Chromium | Chrome for Developers
17. Inside look at modern web browser (part 1) | Blog | Chrome for Developers n 1 1
18. Inside look at modern web browser (part 1) | Blog | Chrome for Developers n 1 1
19. Inside look at modern web browser (part 1) | Blog | Chrome for Developers n 1
20. n 1 1 RenderingNG | Chromium | Chrome for Developers
21. RenderingNG | Chromium | Chrome for Developers
22. n
23. MEMO ここで4分を越えていたら焦る
24. 具体的なフロー
25. 1. 開発者スクリプトが、 foo.com のレンダー処理で DOM を変更する。 2. Blink レンダラーがコンポジターに、レンダリングが必 要であることを伝える。 3. コンポジターが Vizに、レンダリングが必要であることを 伝えます。 4. Vizは、レンダリングの開始をコンポジターに通知しま す。 5. コンポジターは、開始信号を Blinkレンダラーに転送し ます。 6. メインスレッドのイベントループランナーがドキュメント のライフサイクルを実行します。 7. メインスレッドが結果をコンポジタースレッドに送る。 8. コンポジターイベントループランナーがコンポジティン グライフサイクルを実行する。 9. ラスタータスクはすべて Viz for rasterに送られます（こ れらのタスクは複数あることがよくあります）。 10. VizがGPU上でコンテンツをラスター処理します。 11. Vizがラスタータスクの完了を確認します。 注：Chromiumはラスタの完了を待たないことが多く、 その代わりに、ステップ 15が実行される前にラスタ タスクによって解決されなければならない sync tokenと呼ばれるものを使用します。 12. コンポジターフレームが Vizに送信されます。 13. Vizは、foo.comレンダー処理、 bar.com iframeレン ダー処理、およびブラウザ UI用のコンポジターフレー ムを集約します。 14. Vizが描画をスケジュールします。 15. Vizは、集約されたコンポジターフレームを画面に描画 します。 RenderingNG architecture を元に筆者が作図 DOM更新
26. 1. 一連の入力イベント（マウス、タッチ またはキーボード） 2. 3. コンポジターはメインスレッドがそ のイベントを知る必要があるかどう かを判断します。 4. 5. メイン スレッドは、入力イベント リ スナー ※ を起動して、リスナーが イベントに対して preventDefault を 呼び出すかどうかを確認します。 ※ pointerdown、touchstar、 pointermove、touchmove、または wheel 6. 7. preventDefault が呼び出されてい ない場合、入力イベントはブラウザ プロセスに送り返されます。 8. ブラウザプロセスは、他の最近のイ ベントと組み合わせてスクロール ジェスチャに変換します。 9. 10. そこでスクロールが適用され、 baz.com レンダープロセスのコンポ ジタースレッドは、コンポジターイベ ントループでアニメーションをチック します。これにより、スクロールが 変更されます。 11. 12. 13. 14. 文字数の関係で改変しています スクロール
28. 続きは Web で...
29. Thank you