操作 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就先不弄了,最近机子卡,不想开虚机跑了。)
测试代码:
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 方法还是字符串拼接?的更多相关文章
- Java 字符串拼接 五种方法的性能比较分析 从执行100次到90万次
[请尊重原创版权,如需引用,请注明来源及地址] > 字符串拼接一般使用“+”,但是“+”不能满足大批量数据的处理,Java中有以下五种方法处理字符串拼接,各有优缺点,程序开发应选择合适的方法实现 ...
- JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分)
JQUERY选择和操作DOM元素(利用正则表达式的方法匹配字符串中的一部分) 1.匹配属性的开头 $("[attributeName^='value']"); 2.匹配属性的结尾 ...
- before(),after(),prepend(),append()等新DOM方法简介
一.DOM API也在不断升级 web前端标准一直在不断升级,比方说,说了很多年的HTML5.CSS3,以及天天见的ES6. 然后,似乎就没有然后了.实际上,除了HTML5/CSS3/ES6+,关于D ...
- [转]js中confirm实现执行操作前弹出确认框的方法
原文地址:http://www.jb51.net/article/56986.htm 本文实例讲述了js中confirm实现执行操作前弹出确认框的方法.分享给大家供大家参考.具体实现方法如下: 现在在 ...
- DOM – (w3school)1.DOM 方法 + 2.DOM属性 + 3.DOM 元素
1.DOM 方法 一些 DOM 对象方法 这里提供一些您将在本教程中学到的常用方法: 方法 描述 getElementById() 返回带有指定 ID 的元素. getElementsByTa ...
- Java解析XMl文件之SAX和DOm方法
如题,这两种方法的jar包都在jdk中,不需要下载. 先来说下目录结构: 首先建一个Peron类封装person.xml的属性:DomParseService和SaxParseService分别为两种 ...
- AIX-vi操作-提示Unknown terminal type的问题解决方法
AIX-vi操作-提示Unknown terminal type的问题解决方法AIX Version 5.3$ vi /etc/profilelinux: Unknown terminal type[ ...
- javascript插入before(),after()新DOM方法
随着web的技术突飞猛进的发展.HTML5 ES6等新技术的发展,与此同时DOM等标准也在悄悄的进步,各大浏览器也在悄悄的发展适配新的属性和方法,今天我们来看看Javascript新的DOM的方法 二 ...
- jquery操作select下拉框的各种方法,获取选中项的值或文本,根据指定的值或文本选中select的option项等
简介jquery里对select进行各种操作的方法,如联动.取值.根据值或文本来选中指定的select下拉框指定的option选项,读取select选中项的值和文本等. 这一章,站长总结一下jquer ...
随机推荐
- JAVA基础2---深度解析A++和++A的区别
我们都知道JAVA中A++和++A在用法上的区别,都是自增,A++是先取值再自增,++A是先自增再取值,那么为什么会是这样的呢? 1.关于A++和++A的区别,下面的来看个例子: public cla ...
- c# 控件的基类——Control
控件的基类用于Windows窗体应用的控件都派生自Control类,并继承了许多通用成员,这些成员都是平时使用控件的过程中最常用的. Name:控件实例的名字,通常通过“属性”窗口设置,控件实例名称变 ...
- 转:C#判断ContextMenuStrip右键菜单的来源(从哪个控件弹出来的)
转载自:http://hi.baidu.com/cookiemulan/item/82df8ff867dd53cc531c26c7 有时候,为了提高性能和节约资源,我们会为多个控件,指定同一个右键弹出 ...
- ptrace线程
在ptrace时使用waitpid(-1, &status, 0);无法正常trace 修改为waitpid(-1, &status, __WALL);即可 原因是:
- Codeforce 294A - Shaass and Oskols (模拟)
Shaass has decided to hunt some birds. There are n horizontal electricity wires aligned parallel to ...
- 常用正则表达式爬取网页信息及HTML分析总结
Python爬取网页信息时,经常使用的正则表达式及方法. 1.获取<tr></tr>标签之间内容 2.获取<a href..></a>超链接之间内容 3 ...
- Symfony2 UserSecurityEncoder实现自己的验证方式
fosuserbundle默认使用sha512加密 如果要实现自己的加密方式 需要继承Symfony\Component\Security\Core\Encoder\BasePasswordEncod ...
- [转载]CSS教程--字体与文本属性
b>font-family功能:用于改变HTML标志或元素的字体,你可设置一个可用字体清单.浏览器由前向后选用字体.语法:{font-family:字体1,字体2, ... ,字体n} font ...
- vue 加载更多
<template> <div> <ul> <li v-for="item in articles"> ...
- java中的关键字、保留字、标识符
Java关键字(KeyWord): 对Java的编译器有特殊的意义,他们用来表示一种数据类型或者表示程序的结构. Java保留字(Reserved Word):为Java预留的关键字,现在还没有用到 ...