Mozilla Hacksの「Faster Vue.js Execution in Firefox」を読みました。この記事は、FirefoxでVue.jsの実行速度が改善された背景を、Speedometer 3とJavaScriptのProxy最適化という観点から紹介しています。
記事の要点
Speedometer 3は、実際のユーザー体験に近い形でブラウザ性能を測るための横断的なベンチマークです。その更新作業の中で、Vue.jsのテストがVue 2からVue 3へ変わったとき、Firefoxで性能課題が見つかりました。原因の中心にあったのが、Vue 3のリアクティビティで使われるJavaScriptのProxyです。
Proxyは、オブジェクトのプロパティ読み書きなどを横取りして振る舞いを変えられる強力な仕組みです。MDNの解説にもあるように、getやsetなどの操作をhandlerで定義できます。一方で、Proxyは設計上とても汎用的で、JITコンパイラにとっては最適化しづらい対象でもあります。
Vue公式のリアクティビティ解説では、Vue 3がreactive objectにProxyを使い、プロパティの読み取りで依存関係を追跡し、書き込みで更新を通知する仕組みが示されています。つまり、Vueアプリの重要な実行経路にProxyが入っています。Mozillaはこの利用実態を受けて、特定のcall-siteで出会うProxyの形に合わせ、JIT内で実行できるように最適化しました。この変更はFirefox 118に入り、記事ではVue.jsベンチマークが年間で約40%改善したと説明されています。
気づき
面白いのは、最適化の出発点が「仕様としてProxyがある」ことではなく、「Vue 3という実アプリの重要経路でProxyが使われている」ことだった点です。汎用機能を全部速くするのは難しくても、現実の使われ方をベンチマークで捉えれば、安全に特殊化できる範囲が見えてきます。ブラウザ性能改善は、エンジン内部の技術だけでなく、フレームワークの進化をどう観測するかにも左右されるのだと感じました。
コメントを残す