Partytown

メモ

Partytownとは、メインスレッドをコード専用にして、サードパーティのスクリプトをWorkerに割り当てることで、サイト高速化を支援することを目的としている。

そもそもWorkerとは

Webコンテンツがスクリプトをバックグラウンドスレッドで実行するためのシンプルな手段

Worker スレッドは、ユーザーインターフェイスを妨げることなくタスクを実行できる

ただし、メインスレッドにあるDOM等の操作は出来ない（別途方法が必要）

これにより以下が望める

Webパフォーマンス向上

ブロッキング低減

Workerを利用したSandboxの可能性

Sandboxとは、隔離された領域でプログラムを実行し、問題発生時においてもほかのプログラムに影響を及ぼさないようにする仕組みのこと

古典的には、iframe + postMessage

code:送信元.html

// iframeのwindowオブジェクトを取得

var ifrm = document.getElementById('ifrm').contentWindow;

// 外部サイトにメッセージを投げる

// メッセージ受信イベント

window.addEventListener('message', function(event) {

alert(event.data); //'WORLD!'

}, false);

code:外部サイト.html

// メッセージ受信イベント

window.addEventListener('message', function(event) {

// メッセージ送信元のサイトに返答する

event.source.postMessage('WORLD!', event.origin);

}, false);

JavaScript Sandboxの選択肢

ShadowRealm

JavaScriptの実行環境内に分離されたグローバル環境を用意するための標準仕様

本質的に安全ではないSandbox

Web Worker

バックグラウンドスレッド動作

iframeほど古典ではないが、案外歴史はある

Sandboxとしてというよりいわゆる"Off the main thread"

Wasm

jsに限らずどんな言語でもコンパイルさればブラウザ上で動作できる

Wasm上でjsを動かすこともできる

Wasm上でDOM操作する仕組み

問題点

すべてに置いてSandboxとメインスレッドの通信は、postMessage頼み

domが取り扱いにくい（document.◯◯的なものがWorkerからは得られない。postMessageでメインスレッドから取得）

上記の点でコールバックやPromiseに変換する必要があった

同期DOMを前提としている各種ライブラリは、Sandobox環境下では、そのまま動かすことが出来ない

Partytownはちょっとしたハックでこれらを成し遂げている

同期的なXMLHttpRequest呼び出し

Service Worker

document.body.clientWidth的なものがWorker上で取得できる

まだまだアルファバージョンのプロジェクト

価値としては、WorkerからDOMが直接触れるやつ（単純に処理系統が増える）

要は 3rd party script を安全に隔離するため、 WebWorker + DOM の mock で動かす。

worker-dom との一番の違いは、worker-dom は DOM API をすべて mock 化して実装してその操作を転送する。その上で取得する操作は非同期APIとして実装される。

const style = await window.getComputedStyle(element)

partytown は非同期操作を隠蔽する

const style = window.getComputedStyle(element)

参考

今Partytownがヤバい。JavaScript Sandboxの未来はどっちだ？

partytown の Worker からの同期的メインスレッド操作を実装してみる

遅延読み込みライブラリ「Partytown 0.0.5」がリリース

【JavaScript】PostMessageを使ったクロスドメインでのデータ通信

JavaScript postMessageでクロスドメインメッセージ通信

重い処理にはWebWorkerを使う

off-the-main-thread の時代