読者です 読者をやめる 読者になる 読者になる

jQueryの .text() が遅かった

DOM要素内の文字列を変更する処理にjQuery.html() を使用しているコードを見て、「ムププw .text() のほうが速いからw」とか煽ってたら、実は .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

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

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

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

jQuery 2.1.1

結論

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';
});