Web標準化時代のJavaScript

innerHTMLとinnerText/textContentの速度比較

innerHTMLとinnerText/textContentの速度比較結果です。FirefoxのみtextContentで計測しています。
テストマシンはPower Mac G5 (2GHzx2、メモリ4GB)、WindowsはXP SP2 (3.0GHz、768MB) で行っています。動作速度は何度かリロードした場合の値になっています。また、動作速度は環境により異なるので、あくまでも参考程度にしてください。
【サンプル1を実行 (innerHTML)】
【サンプル2を実行 (innerText)】
【サンプル3を実行 (textContent)】
OSブラウザinnerHTML (msec)innerText/textContent (msec)
MacOS X (10.4.7)Safari 2.0.4200120
MacOS X (10.4.7)Firefox 1.5.0.41490440
MacOS X (10.4.7)Opera 9.0350190
Windows XP SP2Internet Explorer 62260438
Windows XP SP2Firefox 1.5.0.41650468
Windows XP SP2Opera 9.0300150
【サンプル１】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<title>Sample</title>
</head>
<body>
<p>JavaScript Speed Test</p>
<div id="outputArea"></div>
</body>
</html>

■スクリプトファイル (test.js)
window.onload = function() {
var divObj = document.getElementById("outputArea");
var num = 10000;
s = (new Date()).getTime();
var txt = "";
for (var i=0; i<num; i++) {
divObj.innerHTML = "SampleText";
}
e = (new Date()).getTime();
alert(e-s);
}
【サンプル２】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<title>Sample</title>
</head>
<body>
<p>JavaScript Speed Test</p>
<div id="outputArea"></div>
</body>
</html>

■スクリプトファイル (test.js)
window.onload = function() {
var divObj = document.getElementById("outputArea");
var num = 10000;
s = (new Date()).getTime();
var txt = "";
for (var i=0; i<num; i++) {
divObj.innerText = "SampleText";
}
e = (new Date()).getTime();
alert(e-s);
}
【サンプル３】
■HTMLファイル
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<script type="text/javascript" src="test.js"></script>
<title>Sample</title>
</head>
<body>
<p>JavaScript Speed Test</p>
<div id="outputArea"></div>
</body>
</html>

■スクリプトファイル (test.js)
window.onload = function() {
var divObj = document.getElementById("outputArea");
var num = 10000;
s = (new Date()).getTime();
var txt = "";
for (var i=0; i<num; i++) {
divObj.textContent = "SampleText";
}
e = (new Date()).getTime();
alert(e-s);
}