JSで高速なのはどっちなのか。

Question

JSについて詳しくないのですが、createElementで作成して入れるのと、手動でくっつけて追加するのはどちらの方が高速なのでしょうか。

let a = document.createElement("a");
a.href = json[i].link;
a.target = "_blank";
let div = document.createElement("div");
let strong = document.createElement("strong");
strong.innerText(json[i].title);
div.appendChild(strong)
let p = document.createElement("p");
p.innerText(json[i].snippet);
div.appendChild(p)    
document.getElementById('SearchResults').appendChild(div)

let o = "<a href=";
let p = " target=&quot;_blank&quot;><div><strong>";
let q = "</strong><p>";
let r = "</p></div></a>";
document.getElementById('SearchResults').insertAdjacentHTML('beforeend', o + json[i].link + p + json[i].title + q + json[i].snippet + r);

また、子要素に追加するとき、insertAdjacentHTMLとappendChildどちらの方が高速なのでしょうか。
JSの基礎などでもいいので教えてください。

追記

教えていただいたFragmentを使って見ました。
テンプレ化することで高速になると聞きましたが、約10回ほどの繰り返しの場合はどちらの方が早いのでしょうか。

for (let i = 0; i < length|0; i=(i+1)|0) {
  let a = document.createElement("a");
  a.href = json[i].link;
  a.target = "_blank";
  let div = document.createElement("div");
  let strong = document.createElement("strong");
  strong.innerText(json[i].title);
  div.appendChild(strong)
  let p = document.createElement("p");
  p.innerText(json[i].snippet);
  div.appendChild(p)    
  fragment.appendChild(div);
}
document.getElementById('test').appendChild(fragment);

Comments

[m.ts10806]

自身で試した結果をまずは提示してください。処理時間をはかるのも自身で簡単な記述でできます。 http://write-remember.com/program/javascript/console_time/

[2001Y]

なるほどこんなものがあるんですね！ありがというございます！

[x_x]

innerText()メソッドは間違いでしょうか？

Answer 1

外部ソースがHTMLで与えられるような場合は別ですが、できるだけHTMLからエレメントを起こすのは避けて、setAttribute・appendChild、textContentなどのエレメントを直接操作するDOM APIを使いましょう。

速度面でもたしかに有利なのですが、それより大きなメリットとして、XSS対策になるということがあります。

HTMLで書いた場合、何が来てもそのままHTMLとして解釈されますので、HTML断片が紛れ込んでいた場合もエスケープしなければそのままタグが有効となってしまいますが、textContentやcreateTextNodeを使えば、何を投げ込んでも完全にテキストとしてしか認識されず、意図しないところからタグが発生してしまうこともなくなります。

属性を与える場合も、HTML文字列の合成では区切り文字などを混ぜ込むことで意図しない属性を増やされるなど、不適切なHTMLを生成させられる危険がありますが、setAttributeを使えば与えた値は必ず「1つの属性」になってくれます。

Comments

[maisumakun]

なお、innerTextはメソッドではなくプロパティなので、「node.innerText = 'string';」のように使います。

[2001Y]

なるほど...ありがとうございます！
追記の方も教えていただければと思います。

[maisumakun]

たった10回の操作では絶対的な時間が短いので、よほど特殊な条件でない限り気にする必要があるほどの差は出ないと思います。

[2001Y]

なるほど、そうなると文字の少ない無理やり書いた方が良いのかもしれませんね！

Answer 2

innerTextを修正しても両者は違う処理です。
前者:divを突っ込んでいる
後者:エスケープしていない

最適化が進んでいて、ループ回数での場合分けもしているみたいですのでなかなか比較は難しいのですが、このような0.1msにも満たない処理を気にするのは繰り返し処理するからだと思います。
その場合はDocumentFragmentを使いましょう。テンプレートも使い、あらかじめ各ノードを取得しておけばいいです。
https://html5experts.jp/yoshikawa_t/1932/
（ここの例はあらかじめノードを取得していません。もっと速くできます）

Comments

[2001Y]

Fragment知りませんでしたありがとうございます！
追記の方も教えていただければと思います。

Answer 3

原則おなじような冗長な処理をするならDOMの方がコストが高いでしょう
しかしDOMもFragmentしたり繰り返し処理をCloneで処理したりすると
効率化を図れるので必ずしもパフォーマンスが悪いとはいえません
逆にDOMを使わない場合、すべてが文字列としてあつかわれるということになり
任意にエスケープ処理などをしないといけないので、
その分描画や文書構造の構築以外の部分でのコストがかかります。

参考：DOM操作の最適化によるJavaScriptチューニング

Comments

[2001Y]

Fragment知りませんでしたありがとうございます！
追記の方も教えていただければと思います。

[yambejp]

奇しくもx_xさんと同じページの紹介になってますね

[2001Y]

そうでした。
しかし、下の方にも気にする必要はないなど、詳しく書いてあってわかりやすかったです。