HTML5 classList APIの速さを調べてみた

JavaScript

HTML5 classList APIっていうのがあるそうです。知りませんでした。
ちょっと覗いていたらこれは便利そうだ、ということで組み込んでみようか、という前に簡単にテストしてみました。
Native APIだから速いよね〜という期待を込めて。

そもそもの発端

Twitterでちょっと見かけたので。

テストしてみる

HTML5で追加されるclassList APIについてのメモ :: 5509

によると、現状では、

とかで使えるらしいです。add()とかtoggle()とか色々できるらしいのですが、ClassList#containsについて今回はちょっと調べてみました。
比較対象として、jQuery1.5.1とゴニョゴニョと判定する方式を使ってみます。以下がテストコードです。




<!doctype html><html><head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>ClassList#contains</title>

<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript">

onload = function() {

	var result = document.getElementById('result'),

	    res = [];

	

	res[res.length] = classListByJQuery('hogehoge');

	res[res.length] = classListByNativeAPI('hogehoge');

	res[res.length] = classListOrig('hogehoge');
	result.innerHTML = res.join('<br />');

}
function classListByJQuery(c) {

	var d = $(document.body),

	    i = 0,

	    start = new Date().getTime(),

	    r;
	for (; i < 10000; ++i) {

		if (!d.hasClass(c)) {

			throw Error('class error');

		}

	}

	r = new Date().getTime() - start;
	return 'jquery::hasClass -> ' + r;

}
function classListByNativeAPI(c) {

	var d = document.body,

	    i = 0,

	    start = new Date().getTime(),

	    r;
	for (; i < 10000; ++i) {

		if (!d.classList.contains(c)) {

			throw Error('class error');

		}

	}

	r = new Date().getTime() - start;
	return 'Native classList API -> ' + r;

}
function classListOrig(c) {

	var d = document.body,

	    i = 0,

	    start = new Date().getTime(),

	    r;
	for (; i < 10000; ++i) {

		if ((' ' + d.className + ' ').indexOf(' ' + c + ' ') === -1) {

			throw Error('class error');

		}

	}

	r = new Date().getTime() - start;

	

	return 'Orig checker -> ' + r;

}
</script>

</head>

<body class="hogehoge hugahuga">

<div id="result"></div>

</body>

</html>

ちょっと長いですね。「classListByJQuery」がjQuery、「classListByNativeAPI」がclassList API、「classListOrig」がゴニョゴニョやるもので、
それぞれを10000回実行してみました。結果は以下のとおり。

Firefox:



jquery::hasClass -> 32

Native classList API -> 36

Orig checker -> 8

Chrome:



jquery::hasClass -> 10

Native classList API -> 3

Orig checker -> 3

やっぱりChromeは速いですねー。でもFirefoxではあんまり変わらないどころかやや遅めでした。
自分で判定する処理は文字列比較なので平均的な速度ですね。私は大体これで判定してます。

感想

Firefoxはこれから速くなればいいと思います。条件によっては使えるかもしれないですね。