質問: ブラウザで HTML/CSS を読み込んでページを描画した後、もし JavaScript によって動的に DOM が書き換わったら、ブラウザはページの再描画をしなくてはなりません。 素朴に考えるとページの描画にかかるコストは無視できません。DOM がちょっと変わっただけで要素のレイアウトが変わりえますし、テキストの折り返しが変わって更にレイアウトが変わることもありそうです。 しかし多くの場合、書き換えられる部分は HTML/CSS のコードで見るとごく一部です。したがって再描画時に全体を描き直すのではなく部分的に描き直すようなことをしていてもおかしくないと思うのですが、よく詳細を知りません。 ブラウザがページを再描画する際、どのようなアルゴリズムで行われているのでしょうか? どんな高速化があるのか箇条書きにする程度の粒度で教えて頂ければ幸いです。 補足:個人的に何となくイメージが付いたので回答を承認しておりますが、更に回答を投稿して他の最適化やもっと詳しいお話を教えて頂くことも大歓迎です :)
回答: ブラウザの仕組み: 最新ウェブブラウザの内部構造 の **”動的な変更”** に説明があります 以下 ブラウザの仕組み: 最新ウェブブラウザの内部構造からの引用です。 > > 動的な変更 > > ブラウザでは、変更に対応して最小限の操作を実行しようとします。そのため、要素の色が変更された場合は、その要素の再描画のみを行います。要素の位置が変更された場合は、要素とその子や兄弟のレイアウトと再描画を行います。DOM > > ノードを追加すると、ノードのレイアウトと再描画が行われます。「html」要素のフォント > > サイズを増やすなど、大きな変更を加えた場合は、キャッシュが無効になり、ツリー全体の再レイアウトと再描画が行われます。 > > >