JavaScript createElement & Array Push Benchmark

Zeuxis  2011-07-13  Notes

以下簡單測試了 10000 次和 50000 次的情況..

10000 次:
Chrome 12 和 FireFox 5 都是 createElement 比較快

50000 次:
Chrome 12 和 FireFox 5 都是 array push 比較快.
而且 Chrome 12 還在刷新第 2 次後 createElement 的方法會掛掉
可能機子太差

當然這種測試有點解單..在網上面有比較多的測試.
還提到另一種方法.而且也提到了 createElement 比較消耗記憶體.
只是在目前機子不斷提升的日子中.如果使用不多的情況下這種東東有多少意義?

使用 createElement 建立:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<html>
<head>
</head>
<body>
<div id="container"></div>

<!-- Case 1 -->
<script language="javascript" type="text/javascript">
var start_time = new Date().getTime(),
	container_tag = document.getElementById("container");

for(var i=0; i&lt;50000; i++) {
	var p_tag = document.createElement("p"),
		p_text = document.createTextNode("This is a simple test case");
	
	p_tag.appendChild(p_text);
	container_tag.appendChild(p_tag);
}

console.log( new Date().getTime() - start_time );
</script>

</body>
</html>


使用 array push 之後再插進
<pre lang="html4strict" line="1">
<html>
<head>
</head>
<body>
<div id="container"></div>

<!-- Case 2 -->
<script language="javascript" type="text/javascript">
var start_time = new Date().getTime(),
	container_tag = document.getElementById("container"),
	container_text= [];

for(var i=0; i&lt;50000; i++) {
	var text = "<p>This is a simple test case</p>";
	container_text.push(text);
}

container_tag.innerHTML = container_text.join("");

console.log( new Date().getTime() - start_time );
</script>

</body>
</html>
</pre>
© Copyright 2007 - 2023 by Zeuxis Lo.