操作 html 的时候是使用 dom 方法还是字符串拼接？

比如一个列表里面有很多个 li，要给他们加上数据。但多少个 li 是不确定的，由后台数据确定。这时候，就要动态生成 html 内容了。

那么，这个过程，

是使用 += 方法把标签、数据进行一个个的字符串拼接性能快，

还是先把多少个 li 使用 dom 方法(如 jquery 的 clone 、 append)复制出来，再向 dom 添加数据快？

append / attr / clone VS +

 

纯JS替DOM添加html字符串：appendHTML方法和prependHTML方法

www.MyException.Cn  网友分享于：2015-04-01  浏览：0次

 纯JS为DOM添加html字符串：appendHTML方法和prependHTML方法
 
 
appendHTML:
 
HTMLElement.prototype.appendHTML = function(html) {
    var divTemp = document.createElement("div"), nodes = null
        // 文档片段，一次性append，提高性能
        , fragment = document.createDocumentFragment();
    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    this.appendChild(fragment);
    // 据说下面这样子世界会更清净
    nodes = null;
    fragment = null;
};
 
prependHTML:
 
var prependHTML = function(el, html) {
    var divTemp = document.createElement("div"), nodes = null
        , fragment = document.createDocumentFragment();

    divTemp.innerHTML = html;
    nodes = divTemp.childNodes;
    for (var i=0, length=nodes.length; i<length; i+=1) {
       fragment.appendChild(nodes[i].cloneNode(true));
    }
    // 插入到容器的前面 - 差异所在
    el.insertBefore(fragment, el.firstChild);
    // 内存回收？
    nodes = null;
    fragment = null;
};
 
 
转自：http://www.zhangxinxu.com/wordpress/2013/05/js-dom-basic-useful-method/

JS中三种字符串连接方式及其性能比较

JS中三种字符串连接方式及其性能比较

工作中经常会碰到要把2个或多个字符串连接成一个字符串的问题，在JS中处理这类问题一般有三种方法，这里将它们一一列出顺便也对它们的性能做个具体的比较。

第一种方法  用连接符“+”把要连接的字符串连起来：

str="a";
str+="b";
毫无疑问，这种方法是最便捷快速的，如果只连接100个以下的字符串建议用这种方法最方便。

 

第二种方法  以数组作为中介用 join 连接字符串：

var arr=new Array();
arr.push(a);
arr.push(b);
var str=arr.join("");
w3school 网站介绍说这种方法要比第一种消耗更少的资源，速度也更快，后面我们通过实验再验证是否是这样。

 

第三种方法  利用对象属性来连接字符串

复制代码
function stringConnect(){
    this._str_=new Array();
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join();
}
    var mystr=new stringConnect;
    mystr.append("a");
    var str=mystr.toString();
复制代码
 

利用下面代码对三种方法性能进行比较，通过更改 c 的值来调整连接字符串的个数：

复制代码
var str="";
var d1,d2;
var c=5000;//连接字符串的个数


//------------------------测试第三种方法耗费时间-------
 d1=new Date();
function stringConnect(){
    this._str_=new Array();
}
stringConnect.prototype.append=function(a){
    this._str_.push(a);
}
stringConnect.prototype.toString=function(){
    return this._str_.join("");
}
    var mystr=new stringConnect;

    for(var i=0;i<c;i++){
        mystr.append("a");
    }
str=mystr.toString();
 d2=new Date();
 console.log(d2.getTime()-d1.getTime());
//-----------------------------------------------------

//------------------------测试第二种方法耗费时间-------
d1=new Date();
    var arr=new Array();
for(var i=0;i<c;i++){
    arr.push("a");
}
str=arr.join("");
    d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------

//------------------------测试第一种方法耗费时间-------
d1=new Date();for(var i=0;i<c;i++){
    str+="a";
}
d2=new Date();
console.log(d2.getTime()-d1.getTime());
//-------------------------------------------------------
复制代码
 

 

我调整 c 分别等于5000、50000、500000、5000000，每个数值分别测了10次，最后结果如下：

c=5000
                                                                             平均耗时（单位毫秒）
第三种   3   2   2   3   1   2  2  1   1   1                              1.8
第二种   1   3   0   3   1   3  4  1   4   2                              2.2
第一种   0   0   0   0   0   1  1  1   1   1                              0.5


c=50000

第三种   22  12     9   14    12   13   13   13   10   17          13.5
第二种   8    13   12     8    11   11     8     9     8    9          9.7
第一种   7    12     5    11   10   10   10    13   16  12          10.6


c=500000

第三种 104 70 74 69 76 77 69 102 73 73                            78.7
第二种 78 100 99 99 100 98 96 71 94 97                             93.2
第一种 90 87 83 85 85 83 84 83 88 86                                 85.4


c=5000000

第三种 651 871 465 444 1012 436 787 449 432 444             599.1
第二种 568 842 593 747 417 747 719 549 573 563               631.8
第一种 516 279 616 161 466 416 201 495 510 515               417.5

统计5000000的时候在地址栏加入了随机参数，应该是避免了缓存的影响的。从结果来看，第一种方法并不比另2种方法消耗多，甚至还更有优势，这点和手册上的说明明显不一致。

 

测试系统：win 7旗舰

浏览器：chrome 52.0.2739.0 m

 

---

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

源：http://www.cnblogs.com/aaa/archive/2008/12/19/1358161.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就先不弄了，最近机子卡，不想开虚机跑了。）

测试代码：

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
 3<html xmlns="http://www.w3.org/1999/xhtml">
 4<head runat="server">
 5    <title>JS DOM操作和字符串操作效率比较</title>    
 6    <script type="text/javascript">
 7    //DOM插入单个DIV
 8    var domTest = function(){    
 9        var div = document.createElement("div");
        div.innerHTML = "test";
        document.getElementById("test").appendChild(div);
        document.getElementById("test").removeChild(div);    
    }
    //字符串插入单个DIV   
    var strTest = function(){    
        var div = "<div'>test</div>";
        document.getElementById("test").innerHTML += div;
        document.getElementById("test").innerHTML = "";
    }
    //测试方法
    function test(fun){
        var start = new Date();        
        for(i=0;i<5000;i++){        
            fun();
        }
        var end = new Date();        
        var idstr;
        if(fun == domTest){
            idstr = "domTest";
        }else{
            idstr = "strTest";
        }
        document.getElementById(idstr).innerHTML += (end.getTime() - start.getTime()) + " , ";
    } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="test"></div>
    DOM: <span id="domTest"></span><br />
    STR: <span id="strTest"></span>
    </form>    
    <input type="button" onclick="test(domTest);" value="Dom测试" />    
    <input type="button" onclick="test(strTest);" value="Str测试" />
</body>
</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的效率，这次对代码稍作修改，插入完成之后不再清除，也就是连着插入多个，然后比较下效率。

测试代码：

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
 3<html xmlns="http://www.w3.org/1999/xhtml">
 4<head runat="server">
 5    <title>JS DOM操作和字符串操作效率比较</title>    
 6    <script type="text/javascript">
 7    //DOM插入单个DIV
 8    var domTest = function(){    
 9        var div = document.createElement("div");
        div.innerHTML = "test";
        document.getElementById("test").appendChild(div);
    }
    //字符串插入单个DIV   
    var strTest = function(){    
        var div = "<div>test</div>";
        document.getElementById("test").innerHTML += div;
    }
    //测试方法
    function test(fun){
        var start = new Date();        
        for(i=0;i<200;i++){        
            fun();
        }
        var end = new Date();        
        var idstr;
        if(fun == domTest){
            idstr = "domTest";
        }else{
            idstr = "strTest";
        }
        document.getElementById(idstr).innerHTML += (end.getTime() - start.getTime()) + " , ";
    } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    DOM: <span id="domTest"></span><br />
    STR: <span id="strTest"></span>
    </form>    
    <input type="button" onclick="test(domTest);" value="Dom测试" />    
    <input type="button" onclick="test(strTest);" value="Str测试" />
    <div id="test"></div>
</body>
</html>

每次插入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，字符串就要进行多少次+=，当然会消耗大量的效率，同时也可以看出火狐在字符串拼接上处理的非常吃力。

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

简述

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

测试代码：

 1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2
 3<html xmlns="http://www.w3.org/1999/xhtml">
 4<head runat="server">
 5    <title>JS DOM操作和字符串操作效率比较</title>    
 6    <script type="text/javascript">
 7    //DOM插入单个DIV
 8    var domTest = function(){
 9        var div = document.createElement("div");
        for(i=0;i<1000;i++){
            var div_in = document.createElement("div");
            div_in.innerHTML = "test";
            div.appendChild(div_in);        
        }
        document.getElementById("test").appendChild(div);
    }
    //字符串插入单个DIV   
    var strTest = function(){
        var div_in = new Array();
        div_in.join("");
        for(i=0;i<1000;i++){
            div_in.push("<div>test</div>");
        }
        var div = "<div>" + div_in.join("") + "</div>";
        document.getElementById("test").innerHTML += div;
    }
    //测试方法
    function test(fun){
        var start = new Date();
        fun();
        var end = new Date();        
        var idstr;
        if(fun == domTest){
            idstr = "domTest";
        }else{
            idstr = "strTest";
        }
        document.getElementById(idstr).innerHTML += (end.getTime() - start.getTime()) + " , ";
    } 
    </script>
</head>
<body>
    <form id="form1" runat="server">
    DOM: <span id="domTest"></span><br />
    STR: <span id="strTest"></span>
    </form>    
    <input type="button" onclick="test(domTest);" value="Dom测试" />    
    <input type="button" onclick="test(strTest);" value="Str测试" />
    <div id="test"></div>
</body>
</html>

 
构造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只有一条进程啊。

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

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