比如一个列表里面有很多个 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就先不弄了,最近机子卡,不想开虚机跑了。)

测试代码:

Code:插入单个元素效率比较

 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的效率,这次对代码稍作修改,插入完成之后不再清除,也就是连着插入多个,然后比较下效率。

测试代码:

Code:插入多个元素效率比较

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

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

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

测试代码:

Code:一次插入多个元素效率并优化字符串拼接比较

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

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

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

 

操作 html 的时候是使用 dom 方法还是字符串拼接?的更多相关文章

  1. Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次

    [请尊重原创版权,如需引用,请注明来源及地址] > 字符串拼接一般使用“+”,但是“+”不能满足大批量数据的处理,Java中有以下五种方法处理字符串拼接,各有优缺点,程序开发应选择合适的方法实现 ...

  2. JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)

    JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...

  3. before(),after(),prepend(),append()等新DOM方法简介

    一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于D ...

  4. [转]js中confirm实现执行操作前弹出确认框的方法

    原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...

  5. DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素

      1.DOM 方法   一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...

  6. Java解析XMl文件之SAX和DOm方法

    如题,这两种方法的jar包都在jdk中,不需要下载. 先来说下目录结构: 首先建一个Peron类封装person.xml的属性:DomParseService和SaxParseService分别为两种 ...

  7. AIX-vi操作-提示Unknown terminal type的问题解决方法

    AIX-vi操作-提示Unknown terminal type的问题解决方法AIX Version 5.3$ vi /etc/profilelinux: Unknown terminal type[ ...

  8. javascript插入before(),after()新DOM方法

    随着web的技术突飞猛进的发展.HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 二 ...

  9. jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等

    简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...

随机推荐

  1. File §1

    The Class of File, it can be seen as one document, also can be seen as list of documents. File  f = ...

  2. ref 参数与out参数

    变量作为参数传给方法,同时希望在方法执行完成后对参数,反应到变量上面.就需要用到ref和out这两个参数. ref参数:在 传入前必须先初始化 out参数:不需要做预先的处理

  3. STO(Security Token Offering)证券型通证、代币发行介绍

    STO(Security Token Offering)证券型通证.代币发行介绍:STO(Security Token Offering)是一个新的融资概念.通过证券化的通证进行融资.早在2017年年 ...

  4. js函数常见的写法以及调用方法

    写在前面:本文详细的介绍了5中js函数常见的写法以及调用的方法,平时看别人代码的时候总是看到各种不同风格的js函数的写法.不明不白的,找了点资料,做了个总结,需要的小伙伴可以看看,做个参考.1.常规写 ...

  5. 自制TFT-Usart通信小项目资料打包

    2010-05-08 15:05:00 用orcad画的原理图如下.

  6. linux Vue+nginx+django 实现前后端分离

    示例项目 -- LuffyCity.com 的上线 具体解释,vue前端提供静态页面,且可以向后台发起get,post等restful请求 django后台提供数据支撑,返回json数据,返回给vue ...

  7. [转载]Oracle修改用户表所属表空间的步骤

    1 .修改表的空间alter table TABLE_NAME move tablespace TABLESPACENAME 查询当前用户下的所有表选择'alter table'|| table_na ...

  8. eclipse格式化代码样式

    1.Window->Preferences //Java 格式化 2.Java->Code Style->Formatter->New->Edit->Line Wr ...

  9. 大神教你Nginx常用基础配置方案

    Nginx的fastcgi模块参数设置 Nginx 有两个配置文件fastcgi_params.fastcgi.conf,两者唯一的区别是,fastcgi.conf 多一个参数 SCRIPT_FILE ...

  10. 前端框架VUE----指令

    一.什么是VUE? 它是构建用户界面的JavaScript框架(让它自动生成js,css,html等) 二.怎么使用VUE? 1.引入vue.js 2.展示HTML <div id=" ...