jQueryの .text() が遅かった

DOM要素内の文字列を変更する処理にjQueryの .html() を使用しているコードを見て、「ムププｗ .text() のほうが速いからｗ」とか煽ってたら、実は .html() のほうが速かったという悲しい事件が起きた。

結論から言うと、jQuery 1.xの場合はIE6, 7, 8サポートのために .text() が遅く、 jQuery 2.xの場合は .text() のほうが速い。

DOMなら textContent が速いよ

jQueryの前にまず、素のDOMを使ったコードでは、 Element.innerHTML プロパティに文字列を代入するパターンをよく見かける。 innerHTML は

el.innerHTML = '<p>チャーハン</p>';

のようにすれば勝手にP要素を作ってくれるので大変便利ではあるが、HTML文字列を含まない文字列についてもパース処理が実行されるので遅い。

もし書き換える文字列からHTML要素を生成する必要がないなら、Element.textContent を使用して

el.textContent = 'カレー';

のようにしたほうが断然速い。

そんな方法で文字列を10,000回書き換える処理時間を計測するサンプルだよ。

DOM
.innerHTML
.textContent

jQuery 1.xなら .html() が速いよ

同じ関係がjQueryの .html() と .text() にも成り立つだろうと思っていたが、実際には .html() のほうが速かった。

ソースコードを確認したら、jQuery 1.xではIE6, 7, 8サポートのため、 .text() の実装に Element.textContent を使わず HTMLDocument.createTextNode() を使用していた(該当箇所)。このAPIが文字列のノードを作るためだけのAPIのくせにイマイチ遅いからファックだ。その結果 .text()のほうがむしろ遅いという虚しい結果に。

jQuery 1.11.1
.html()
.text()

jQuery 2.xなら .text() が速いよ

jQuery 1.xに対して、2.xではIEサポートを打ち切って Element.textContent を使用している(該当箇所)。よって .text() のほうがちゃんと速くなってる。

jQuery 2.1.1
.html()
.text()

結論

DOMで書け(雑)

---

(付録) 時間測定コード

var $targetArea = $('#target-area');

var start = +new Date();

for (var i = 10000; i--; ) {
  // それぞれの方法
  //   $targetArea.html('foo');
  //   $targetArea.text('foo');
  //   $targetArea[0].innerHTML = 'foo';
  //   $targetArea.[0].textContent = 'foo';
}

setTimeout(function () {
  var end = +new Date();
  resultEl.textContent = end - start + 'ms';
});