Javascript DOM操作与html字符串操作效率比较

一直在迷惑一个问题，那就是HTML（XHTML）他即是一个文本字符串，又是一个DOM对象，以前做东西的时候由于我对html比较熟悉，很多地方就直接使用写好的HTML字符串进行插入，例如插入一个含有内容的DIV，就直接拼接好字符串之后再将整个字符串赋给对应的DIV的innerHTML，而是不使用Javscript的DOM操作来createElement，再appendChild。

一直以来也就这么习惯了，而且这样做可以减少代码的行数，javascript要好几行代码才可以完成的事情我只需要两行就可以完成，但是随着对代码效率的重视越来越高，不得不静下心来考虑下两者之间的差异了，自己感觉自己一直以来的做法最好的地方就是减少了javascript的DOM操作，用DOM来创建一个DIV，要定义好半天，个人认为是在javascript中把浏览器解析html的工作的做了，然后把现成的DIV扔给浏览器，这样做无疑是加重了JS的负担，而直接拼接字符串的话JS就只需要负责一些逻辑，把要插入的DIV直接用字符串给浏览器，让浏览器自己去解析HTML，虽然拼接字符串很消耗效率，但是只要将+号减少，或使用数组进行字符串拼接，也会降低这一消耗。但这些毕竟只是我自己的推测，具体会怎么样，还真心里没底。

今天刚好忙完了手上的工作，看了一些书，就做些DEMO测试测试吧。

测试一：插入单个元素效率比较。

简述我们来分别用DOM和字符串的方式来插入一个简单的DIV对象，分别用IE6和火狐2来比较下效率（IE7+和火狐3就先不弄了，最近机子卡，不想开虚机跑了。）

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
4

<head runat="server">
5

<title>JS DOM操作和字符串操作效率比较</title>
6

//DOM插入单个DIV
8

var domTest = function(){
9

var div = document.createElement("div");
10

div.innerHTML = "test";
11

document.getElementById("test").appendChild(div);
12

document.getElementById("test").removeChild(div);
13

}
14

//字符串插入单个DIV
15

var strTest = function(){
16

var div = "<div'>test</div>";
17

document.getElementById("test").innerHTML += div;
18

document.getElementById("test").innerHTML = "";
19

}
20

//测试方法
21

function test(fun){
22

var start = new Date();
23

for(i=0;i<5000;i++){
24

fun();
25

}
26

var end = new Date();
27

var idstr;
28

if(fun == domTest){
29

idstr = "domTest";
30

}else{
31

idstr = "strTest";
32

}
33

document.getElementById(idstr).innerHTML += (end.getTime() - start.getTime()) + " , ";
34

}
35

</script>
36

</head>
37

<body>
38

<form id="form1" runat="server">
39

<div id="test"></div>
40

DOM: <span id="domTest"></span><br />
41

STR: <span id="strTest"></span>
42

</form>
43

<input type="button" onclick="test(domTest);" value="Dom测试" />
44

<input type="button" onclick="test(strTest);" value="Str测试" />
45

</body>
46

</html>

5000次运行5次的结果分别为：（单位：毫秒）

测试结果

IE6：

DOM: 2093 , 2094 , 2078 , 2047 , 2063 平均：2075

STR: 1782 , 1766 , 1750 , 1766 , 1765 平均：1766

FF2：

DOM: 937 , 938 , 938 , 937 , 953 平均：941

STR: 1313 , 1312 , 1328 , 1312 , 1328 平均：1319

（可能你会说我机子怎么这么慢，没办法，公司的电脑。。。）

从上面的数据可以看出，不管何种方式，火狐都要比IE强，在IE下用直接插入html的方式要快于DOM插入，而火狐正好相反，我想这可能与IE的javascript引擎的效率有关吧。

测试二：插入多个元素效率比较。

简述上个测试只是比较插入一个DIV的效率，这次对代码稍作修改，插入完成之后不再清除，也就是连着插入多个，然后比较下效率。

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
4

<head runat="server">
5

<title>JS DOM操作和字符串操作效率比较</title>
6

//DOM插入单个DIV
8

var domTest = function(){
9

var div = document.createElement("div");
10

div.innerHTML = "test";
11

document.getElementById("test").appendChild(div);
12

}
13

//字符串插入单个DIV
14

var strTest = function(){
15

var div = "<div>test</div>";
16

document.getElementById("test").innerHTML += div;
17

}
18

//测试方法
19

function test(fun){
20

var start = new Date();
21

for(i=0;i<200;i++){
22

fun();
23

}
24

var end = new Date();
25

var idstr;
26

if(fun == domTest){
27

idstr = "domTest";
28

}else{
29

idstr = "strTest";
30

}
31

document.getElementById(idstr).innerHTML += (end.getTime() - start.getTime()) + " , ";
32

}
33

</script>
34

</head>
35

<body>
36

<form id="form1" runat="server">
37

DOM: <span id="domTest"></span><br />
38

STR: <span id="strTest"></span>
39

</form>
40

<input type="button" onclick="test(domTest);" value="Dom测试" />
41

<input type="button" onclick="test(strTest);" value="Str测试" />
42

<div id="test"></div>
43

</body>
44

</html>
45

每次插入200个，连续插入5次结果：

测试结果

IE6：

DOM: 63 , 79 , 78 , 78 , 94

点5次DOM之后刷新页面再测html字符串的：

STR: 375 , 1015 , 1656 , 2312 , 3000

FF2：

DOM: 32 , 31 , 31 , 32 , 31

同样点5次DOM之后刷新页面再测html字符串的：

STR: 13781 , 56984 , 。。。后面不敢点了。

这次可以看出DOM操作明显要优于字符串了，因为这次添加了多少个DIV，字符串就要进行多少次+=，当然会消耗大量的效率，同时也可以看出火狐在字符串拼接上处理的非常吃力。

测试三：一次插入多个元素效率并优化字符串拼接比较。

简述上次测试是反复多次插入多个元素，这次测试我们先构造好多个元素，然后一次性插入，比较效率，同时吸取上次字符串拼接的教训，这次用数组来对字符串拼接进行优化。

测试代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2

<html xmlns="http://www.w3.org/1999/xhtml">
4

<head runat="server">
5

<title>JS DOM操作和字符串操作效率比较</title>
6

//DOM插入单个DIV
8

var domTest = function(){
9

var div = document.createElement("div");
10

for(i=0;i<1000;i++){
11

var div_in = document.createElement("div");
12

div_in.innerHTML = "test";
13

div.appendChild(div_in);
14

}
15

document.getElementById("test").appendChild(div);
16

}
17

//字符串插入单个DIV
18

var strTest = function(){
19

var div_in = new Array();
20

div_in.join("");
21

for(i=0;i<1000;i++){
22

div_in.push("<div>test</div>");
23

}
24

var div = "<div>" + div_in.join("") + "</div>";
25

document.getElementById("test").innerHTML += div;
26

}
27

//测试方法
28

function test(fun){
29

var start = new Date();
30

fun();
31

var end = new Date();
32

var idstr;
33

if(fun == domTest){
34

idstr = "domTest";
35

}else{
36

idstr = "strTest";
37

}
38

document.getElementById(idstr).innerHTML += (end.getTime() - start.getTime()) + " , ";
39

}
40

</script>
41

</head>
42

<body>
43

<form id="form1" runat="server">
44

DOM: <span id="domTest"></span><br />
45

STR: <span id="strTest"></span>
46

</form>
47

<input type="button" onclick="test(domTest);" value="Dom测试" />
48

<input type="button" onclick="test(strTest);" value="Str测试" />
49

<div id="test"></div>
50

</body>
51

</html>
52

构造1000个DIV，然后一次性插入：

测试结果

IE6：

DOM: 297 , 313 , 312 , 313 , 313

刷新之后：

STR: 31 , 32 , 31 , 63 , 79

FF2：

DOM: 109 , 109 , 110 , 109 , 110

刷新之后：

STR: 15 , 31 , 62 , 78 , 94

结果出来了，HTML字符串获胜！

不过从结果中也可以看出，直接插入html字符串随着插入次数的增多，效率也会慢下来，这就需要在字符串处理上格外的小心了。

看来我的观点还是有一定道理的，把该浏览器解析的东西就交给浏览器吧，让javascript有更多的精力去处理逻辑上的事情。毕竟目前javascript只有一条进程啊。

从上面的几个试验综合起来我们还能看到，很多情况下其实采用什么方法并不重要，重要的是我们要根据自己的需求，能够想到会遇到什么样的瓶颈，然后去避开他，或寻求最佳折中的方案。

多的也不会说了，大道理不太会讲，就暂且到此吧。