JavaScript DOMに秒間で2万個のオブジェクトに更新を与え続ける

Question

DOM上にdivを2万個生成
↓
秒的に変化を与えるという処理を行っています
あとからDOMをいじるべきではないという意見も散見していましたが、
実際どうなんでしょうか
CSS Animationさえ掛けなければ、負荷としてはたいして問題ないと考えていいのか、
２万個は多すぎるが１万個だったら平気だとか、
詳しい知見をお持ちの方返答お願いいたしましす

このコードに意味はありません
わざと負荷をかける作りで再現しています

<script>
window.onload=function(){
for(i=0;i<20000;i++){
div=document.createElement("div");
div.style.width="100%";
div.style.height="20px";
div.classList.add("div");
div.style.background="rgb("+(~~(256*Math.random()))+","+(~~(256*Math.random()))+","+(~~(256*Math.random()))+")";
document.body.appendChild(div);
}
timer();
}
function timer(){
Array.from(document.querySelectorAll('.div'), div => {
div.style.background="rgb("+(~~(256*Math.random()))+","+(~~(256*Math.random()))+","+(~~(256*Math.random()))+")";
});
Array.from(document.querySelectorAll('.div'), div => {
div.innerHTML=Math.random();
});
setTimeout(timer,1000);
}
</script>

Comments

[maisumakun]

「わざと負荷をかける作り」としているコードなのに「負荷としてはたいして問題ないと考えていい」とかそういう議論となるのは、どのような背景があってのことなのでしょうか？

[xcx]

自分自身でも今どれほど負荷がかかってるのかわからない、
一般的な知見でどの程度だったら許容されるのかなど、知りたかったのですが

[maisumakun]

「わざと負荷をかける」状況自体が全く「一般的」なものではないので、一般的な状況での知見を適用する範疇から外れていると感じました。

[y_waiwai]

なにをやりたくてそれをやってるんでしょう。

[xcx]

やりたいことはチャットのようなシステムを作り、
発言されたログの時刻を全てリアルタイムで更新し続けるためです
ログが増えれば増えるほど更新箇所が増える為、どれだけ耐えうるのか知りたかったです

[maisumakun]

> ログが増えれば増えるほど更新箇所が増える為

追加になった分だけ更新するのであれば、「秒間で2万個」なんていうことにはならないのではないでしょうか？

[y_waiwai]

ならそんな回りくどいことせずに、実際にそれを作って負荷実験をすればいいんでは。

[Lhankor_Mhy]

1秒間に1万件のチャット更新をするなら、描画よりもネットワークの方がボトルネックになりそうな気がしますね。

Answer 1

当方の環境でご提示のコードを試してみましたが、500msほどで描画が完了しているので、問題は起きませんでしたが、GCはやや厳しそうでした。環境によっては問題が起きる数値かと思います。

なお、yambejpさんのコードのように、1万の要素ごとに毎秒ペイント処理が起きるような書き方をするとかなり厳しいと思います。
ペイント処理が1秒に1回になるように工夫すれば、まあ、なんとか、という感じではないでしょうか。

Answer 2

普通にやれば実用には耐えないでしょうね

<table border id="t1"></table>
<script>
const w=10;
const h=10;
const tr=Array(w).fill(null).map(()=>document.createElement('td')).reduce((x,y)=>(x.appendChild(y),x),document.createElement('tr'));
Array(h).fill(null).forEach(()=>t1.appendChild(tr.cloneNode(true)));
document.querySelectorAll("td").forEach(x=>{
  setInterval(()=>x.textContent=parseInt(Math.random()*10),1000);
});
</script>

w=100、h=200あたりでテストするとブラウザによってメモリをバカ食いしたり
描画が追いつかなかったり、いろいろです