Webブラウザエンジニアリング ―Chrome開発者たちから学ぶ、作って理解するブラウザとWebの仕組み

16章計算結果の再利用

　コンポジット処理（13章参照）はアニメーションをより滑らかにします。しかし、テキスト編集やDOMの変更のようにレイアウトに影響を与えるインタラクションには役立ちません。幸いなことに、レイアウトツリーを一種のキャッシュとして扱い、変更された部分のみを再計算することで、冗長なレイアウト作業を回避できます。この「無効化（invalidation）」技術は、伝統的に複雑でバグが発生しやすいものです。ここでは原則に基づいたアプローチと単純な抽象化を用いることで、管理しやすくします。

16.1　コンテンツの編集

　13章では、コンポジット処理（合成）を使用して、transformやopacityのようなCSSプロパティを滑らかにアニメーションさせました。しかし、widthやfont-sizeのようなレイアウトを引き起こすプロパティは、ディスプレイリストだけでなくレイアウトツリーも変更するため、この方法ではアニメーションさせることができませんでした。そして、レイアウトを誘発するプロパティのアニメーションは避けるのが最善ですが、レイアウトツリーを変更する多くのユーザーインタラクションには高い応答性が要求されます。

　その良い例のひとつがテキスト編集です。ユーザーのタイピング速度はかなり速いので、数フレームの遅延でさえ気になります。しかし、編集はHTMLツリーを変更することになるので、レイアウトツリーも変更します。現在私たちのブラウザが行っているように、レイアウトツリーを最初から再構築すると、複雑なページでは非常に遅くなる可能性があります。例えば、この章のWeb版[1]を私たちのブラウザで読み込み、この段落の後に表示される入力ボックスにタイピングしてみてください。レンダリングだけで1.7秒もかかり、あまりにも遅すぎるとわかるでしょう（ ...