52274


ブラウザで HTML/CSS を読み込んでページを描画した後、もし JavaScript によって動的に DOM
が書き換わったら、ブラウザはページの再描画をしなくてはなりません。

素朴に考えるとページの描画にかかるコストは無視できません。DOM
がちょっと変わっただけで要素のレイアウトが変わりえますし、テキストの折り返しが変わって更にレイアウトが変わることもありそうです。

しかし多くの場合、書き換えられる部分は HTML/CSS
のコードで見るとごく一部です。したがって再描画時に全体を描き直すのではなく部分的に描き直すようなことをしていてもおかしくないと思うのですが、よく詳細を知りません。

ブラウザがページを再描画する際、どのようなアルゴリズムで行われているのでしょうか？ どんな高速化があるのか箇条書きにする程度の粒度で教えて頂ければ幸いです。

補足：個人的に何となくイメージが付いたので回答を承認しておりますが、更に回答を投稿して他の最適化やもっと詳しいお話を教えて頂くことも大歓迎です :)


CC BY-SA 4.0
2019-01-22T12:51:35.397
52215
2019-02-04T13:43:29.637
2019-02-04T13:43:29.637
19110
19110
question
javascript html css アルゴリズム browser
DOMが書き換わった後ブラウザはどのように再描画していますか？


ブラウザの仕組み: 最新ウェブブラウザの内部構造
<https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#Dynamic_changes>

の **”動的な変更”** に説明があります  
以下 ブラウザの仕組み: 最新ウェブブラウザの内部構造からの引用です。

> 動的な変更  
>
> ブラウザでは、変更に対応して最小限の操作を実行しようとします。そのため、要素の色が変更された場合は、その要素の再描画のみを行います。要素の位置が変更された場合は、要素とその子や兄弟のレイアウトと再描画を行います。DOM  
>  ノードを追加すると、ノードのレイアウトと再描画が行われます。「html」要素のフォント  
>  サイズを増やすなど、大きな変更を加えた場合は、キャッシュが無効になり、ツリー全体の再レイアウトと再描画が行われます。


CC BY-SA 4.0
2019-01-23T06:28:48.460
52244
2019-01-23T06:28:48.460
22793
52215
answer


基本的には、DOM, HTML, CSS の **仕様に準拠する範囲で不要な処理をしない** 、の積み重ねです。

大まかには「DOM変更→スタイル計算→レイアウト→ペイント→コンポジション」というステップがあります。以下のような処理はどのブラウザエンジンもやっているのではないかと思います。

  * DOM変更が、表示されているDocumentのツリーに接続していない部分で起きたら、何もしない
  * 要素が挿入削除された場合、特定の結合子や擬似クラスが使用されていない場合、兄弟要素のスタイルを再計算する必要はない
  * display:none が付いた要素の子孫のスタイルは計算する必要がない
  * ある要素のレイアウトを再計算するとしても、別のレイアウトフローに属するツリーはレイアウトし直す必要はない (position:absolute はそれぞれ別のフロー)
  * スタイルの変更でボックスサイズに影響がないプロパティ(色やbox-shadowやら)だけが変更された場合、レイアウトせずにペイント以降をすればよい
  * レイヤーの場所やtransformだけが変更されてペイント結果がまだメモリ上にある場合、コンポジションだけやり直せば良い


CC BY-SA 4.0
2019-01-24T01:12:45.570
52274
2019-01-24T01:12:45.570
3475
52215
answer