随時innerHTMLに書き込んだ場合と一括して書き込んだ場合
随時innerHTMLに書き込んだ場合と一括して書き込んだ場合の速度比較結果です。
テストマシンはPower Mac G5 (2GHzx2、メモリ4GB)、WindowsはXP SP2 (3.0GHz、768MB) で行っています。動作速度は何度かリロードした場合の値になっています。また、動作速度は環境により異なるので、あくまでも参考程度にしてください。
【
サンプル1を実行】
【
サンプル2を実行】
| OS | ブラウザ | 随時書き込み (msec) | 一括して書き込み (msec) |
|---|
| MacOS X (10.4.7) | Safari 2.0.4 | 4304 | 6 |
| MacOS X (10.4.7) | Firefox 1.5.0.4 | 719 | 2 |
| MacOS X (10.4.7) | Opera 9.0 | 450 | 2 |
| Windows XP SP2 | Internet Explorer 6 | 650 | 0 |
| Windows XP SP2 | Firefox 1.5.0.4 | 454 | 0 |
| Windows XP SP2 | Opera 9.0 | 340 | 0 |
【サンプル１】
■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 = 1000;
s = (new Date()).getTime();
for (var i=0; i<num; i++) {
divObj.innerHTML += "Sample Text";
}
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 = 1000;
s = (new Date()).getTime();
var txt = "";
for (var i=0; i<num; i++) {
txt += "Sample Text";
}
divObj.innerHTML = txt;
e = (new Date()).getTime();
alert(e-s);
}