Hatena::ブログ(Diary)

三等兵

2010-04-11

大量の要素を挿入するときcreateDocumentFragmentメソッド

var frame = document.createDocumentFragment();
  for(var i = 0; i <= 255; i++) {
    var div = document.createElement('div');
    div.style.width = '100px';
    div.style.height = '1px';
    div.style.backgroundColor = 'rgb('+i+','+i+','+i+')';
    frame.appendChild(div);
  }
document.body.appendChild(frame);

これだと体感的には違いが分からないかも。でも1つ1つ挿入するよりかレンダリングはスムーズだよね。そういえば以前500個ぐらいのdivつめたときもさっとしてたな。その場合canvas使えば良かっただけだけど。


詳しくはこっち。つーかこの本でみつけたのに本の文章まんまのってるというアハハ。

http://jibun.atmarkit.co.jp/lskill01/rensai/dom07/dom03.html


いつも思うのですが、コード中のコメントってすごく見づらい。

トラックバック - http://d.hatena.ne.jp/sandai/20100411/p1