Mozilla Flux

Mozilla関係の情報に特化したブログです。

Firefox Quantum高速化の一翼を担うQuantum CSS

デスクトップ版Firefox Quantumでは、Quantum CSS(別名Stylo)と呼ばれる新しいCSSエンジンが初期設定で有効化されている(Bug 1330412)。CSSエンジンはレンダリングエンジンの構成要素の1つで、CSSパーサーとスタイルシステムから成り、HTMLパーサーが生成したDOMツリー(DOMノードが樹状に連なったもの)に対し、CSSを解釈してスタイルを計算した結果を当てはめていく。

Quantum CSSは約8.5万行のRust言語のコードで構成される。Geckoの旧CSSエンジンは約16万行のC++言語のコードで構成されていたから、半分程度のコンパクトさだ。それでいて、Quantum CSSは旧CSSエンジンが設計の古さゆえに抱えてた様々な不具合を解消している。もっとも、実装には苦労もあったようだ。font-sizeプロパティ1つとっても、いろんな単位をサポートしなければならないうえ、たとえば"medium"が何を指すかはフォントの系統ごとに変わってくるし、ルビやMathMLでの調整も必要になる。2015年の終わりころに開発が開始され、2年近い歳月を経てようやくFirefoxリリース版への搭載にこぎ着けた。

Quantum CSSは、Geckoの旧CSSエンジンからルールツリーの仕組みを引き継ぎつつ、Servoの並列処理の仕組みを取り入れるとともに、WebKit/Blinkのスタイル共有キャッシュに着想を得たキャッシュシステムを備えている。いわば各種ブラウザの最先端技術を融合させたCSSエンジンなのだ。

f:id:Rockridge:20171105213420p:plain:w400
ベストミックスのCSSエンジン

スタイルシステムは一般に、CSSに記述されている各セレクターが対象となるDOMノードすべてについてマッチするかどうかの判定を行う(セレクターマッチング)。また、計算済みスタイルが適用されないDOMノードについては、親ノードから引き継いだスタイルまたはデフォルトのスタイルを適用する(カスケード)。インタラクティブなWebページの増加に伴い、これらの処理による負担は重くなる一方だ。

Quantum CSSでは、処理の並列化によってこの問題に対処する。すなわち、CPUのマルチコア化を前提に、DOMツリーを適宜分割して、スタイルに関する処理を各CPUコアに割り当てるのだ。CPUが4コアであれば4つの処理を同時にこなすことが可能になる。手が空いたコアは別のコアが担当予定の処理を取ってくるようになっている(work stealingという)ので、コアが遊んでしまうこともない。

また、Quantum CSSでは、計算済みスタイルをキャッシュしておき、同一のスタイルが適用されるノードに対しては重複した処理を行わないようにする。この場合キャッシュのマッチング処理が必要になるが、Quantum CSSのキャッシュシステムは疑似クラスが用いられるケースなども想定してキャッシュ利用の効率性を高めているという。

以上のほかにも多数の最適化が施されているQuantum CSSだが、その実力はどの程度のものだろうか。MozillaのビルドシステムがQuantum CSSの有効化時に行った自動化テストの結果によれば、Amazon.comの読み込みテスト("laptop"のキーワードで検索した結果を25回表示させ、最初の5回を除いた20回について中央値を取ったもの)において、およそ25%の速度向上が見られた。コンテンツ次第ではあるが、複雑なページほど実力を発揮してくれそうだ。

他方、Quantum CSSに欠点がないわけではない。旧CSSエンジンよりもメモリ消費量は増えるようだ。それとは別に、互換性の問題もある。旧CSSエンジンでは正しく表示されていたWebサイトが、Quantum CSSだと表示がおかしくなるケースがありうる。そこで、Mozillaは問題の出たWebサイトにおいて旧CSSエンジンに切り替える仕組みを導入した(Bug 1403077)。

これまでに述べてきたとおり、Quantum CSSはコンテンツに適用されるものだが、Firefox本体のUI部分にも多数のCSSが用いられているので、その処理にQuantum CSSを適用するのは自然な発想といえよう。既にFirefox Nightly 58にはそうした仕組みが実装されており(Bug 1411532)、layout.css.servo.chrome.enabledの設定をtrueに変更すると有効化される。

Android版FirefoxにもQuantum CSSは投入される予定だ。Firefox Nightly 58には初期設定を無効にした形で実装済みで(Bug 1411802)、今後Nightly 59において初期設定が有効に切り替わる見通しだが、そのままリリース版まで維持されるかどうかは未定である。

将来的にQuantum CSSが必要な箇所すべてに適用され、互換性の問題も解消された暁には、旧CSSエンジンは削除されることになる(Bug 1395112)。つまり約16万行のC++コードがGeckoから消えてRustに置き換わるわけで、コードのメンテナンスしやすさや堅牢性といった点において大きなインパクトを与えるとみられる。