SVGの描画領域外へのレンダリングはメモリを圧迫しますか....?

Question

表題の通りなのですが，例えば，以下のように設定した場合

 <svg style="width:100;height:100;">
   <rect x=50 y=50 width=50 height=50 fill="#e38"></rect>
   <rect x=100 y=50 width=50 height=50 fill="#e38"></rect>
</svg>

svg自体の領域は100pxまでなので，実際には上のrectしか描画されません．
しかし，デベロッパーなどで確認すると分かりますが，たしかに下のrectも要素自体は存在しています．
このような場合，描画領域からはみ出している要素もメモリの圧迫の原因になり得るのでしょうか...?それとも，描画はしていないのでほとんどメモリには関わらないのでしょうか...?よろしくお願いいたします．

Answer 1

描画領域からはみ出している要素もメモリの圧迫の原因になり得るのでしょうか

はい.

スクリーンに表示されていなくともDOMツリーにノードが展開されている以上メモリを消費しています. SVGの動作パフォーマンス要因の一つにこのDOMツリーのシンプルさがあるため, スクリーンに表示されているノードのみでグラフィックを構成するのが理想です. が, (条件にもよりますが)数百程度のノードであれば今日のWEBブラウザを稼働しているシステムではさほど影響は出ません.

NOTE:
この他に, ノードの形状(path要素のd属性の複雑度), SVG要素の種類(use,marker要素), g要素のネスト等が描画パフォーマンスに影響を及ぼします. 一方, 単一図形の大きさ(描画領域からはみ出た部分)についてはほとんど考える必要はありません.

NOTE:
もちろん, 影響が無いことを確認する必要はあります.

NOTE:
なお, (createElement/createElementNSメソッドによる)ノード生成と破棄とを繰り返す操作は最も避けるべき行為の一つです. 頻繁なガベージコレクションを引き起こすことでWEBブラウザの動作を不安定化させるからです.

もし, SVGのみでグラフィックを構成すると現実的ではないレベルでのノードが必要となる場合は, 一部もしくは全体をcanvas要素で描いたグラフィックで置き換えて下さい.

Answer 2

DOM Element(=rect)の分だけのメモリーは消費されると思いますが、その結果を反映するための内部のピクセルバッファーのような領域までが大きくなってメモリーを圧迫するわけではないと思います。

内部実装を見たわけではないので推測ですが、こういうものは、クリッピングという手法で「svg領域外に対する描画処理を行わずに済ませる」ような工夫がなされているのが普通だと思います。

気になる場合、ちょっとした実験を試してみるのもよいと思います。rectのサイズを極端に大きくして描画に必要な速度やブラウザープロセスの消費メモリー量を調べてみてはどうでしょう。そうすればあたりがつくように思います。対象ブラウザー全部を調べるというのは大変ですが、それぞれの内部実装を調べるよりはましではないでしょうか？