Fastest way to build an HTML string(拼装html字符串的最快方法)

Fastest way to build an HTML stringPosted in 'Code Snippets, JavaScript' by James on May 29th, 2009
原文:http://james.padolsey.com/javascript/fastest-way-to-build-an-html-string/

代码如下:

var arr = ['item 1', 'item 2', 'item 3', ...],
list = '';
for (var i = 0, l = arr.length; i < l; i++) {
list += '<li>' + arr + '</li>';
}
list = '<ul>' + list + '</ul>';//最低效的方式。
var arr = ['item 1', 'item 2', 'item 3', ...], list = [];for (var i = 0, l = arr.length; i < l; i++) { list[list.length] = '<li>' + arr + '</li>';}list = '<ul>' + list.join('') + '</ul>';;//比上一种的方式快。

var arr = ['item 1', 'item 2', 'item 3', ...];var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';//最优的方式。

执行1000 次:"String concat"
(ms)
"Array pushing"
(ms)
"Native join()"
(ms)
Firefox 314714865Opera 917212578IE 7500229779Chrome 2638872Safari 4b14614160Averages20555970
只有chrome比较特别,第一种方法反而是最快的。

中文翻译版本
第一种:逐个字符串相加


代码如下:

var arr = ['item 1', 'item 2', 'item 3', ...],
list = '';
for (var i = 0, l = arr.length; i < l; i++) {
list += '<li>' + arr[i] + '';
}
list = '<ul>' + list + '</ul>';

这种最常见的,但是效率最低!代码逻辑相对来说复杂。
第二种:逐个 push 进数组


代码如下:

var arr = ['item 1', 'item 2', 'item 3', ...],
list = [];
for (var i = 0, l = arr.length; i < l; i++) {
list[list.length] = '<li>' + arr[i] + '';
}
list = '<ul>' + list.join('') + '</ul>';

比上一种方法稍微快一些,但还是不够好…
第三种:直接join()


代码如下:

var arr = ['item 1', 'item 2', 'item 3', ...];
var list = '<ul><li>' + arr.join('</li><li>') + '</li></ul>';

使用原生的方法(比如 join()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。

使用原生的方法(比如 join()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。

浏览器性能

每种方法是使用一个长度为 130 的数组来测试,其中每个元素的长度是多种多样的,防止浏览器对一定长度的字符串做特殊的优化;每种方法测试了 1000 次;下面的结果显示,执行完这 1000 次需要的时间:

时间: 2011-08-19

JS下高效拼装字符串的几种方法比较与测试代码

在使用Ajax提交信息时,我可能常常需要拼装一些比较大的字符串通过XmlHttp来完成POST提交.尽管提交这样大的信息的做法看起来并不优雅,但有时我们可能不得不面对这样的需求.那么JavaScript中对字符串的累加速度如何呢?我们先来做下面的这个实验.累加一个长度为30000的字符串. 测试代码1 - 耗时: 14.325秒 复制代码 代码如下: var str = ""; for (var i = 0; i < 50000; i++) { str += "xxxx

javascript下高性能字符串连接StringBuffer类

复制代码 代码如下: function StringBuffer(){ this.__strings__ = new Array(); } StringBuffer.prototype.append = function(str){ this.__strings__.push(str); }; StringBuffer.prototype.toString = function(){ this.__strings__.join(" "); }; 其实上面的代码,主要利用了js的数组原理

JavaScript 字符串操作的几种常见方法

连接字符串 连接字符串 var str1="Javascript字符串连接"+",方法一"; var str2="方法二"; str2+="使用+=连接"; var str3="方法三"; str3+=",多字符串连接"+".同时使用多个字符连接"+",正确!"; var str4="字符串连接"; str4=str4.conc

javascript转换字符串为dom对象(字符串动态创建dom)

前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createElement('div'); 然后再给obj设置一些属性. 但是,在实际使用过程中,有些人可能会想,要是能这样创建标准的dom对象就好了 伪代码:var obj=strToDom('<div id="div_1" class="div1">Hello World!</div>'); 那么今天的目的就是教大家怎么去实现一个这样

在光标处插入字符串的实现代码 兼容IE,Firefox

复制代码 代码如下: // 在光标处插入字符串 // myField 文本框对象 // 要插入的值 function insertAtCursor(myField, myValue) { //IE support if (document.selection) { myField.focus(); sel = document.selection.createRange(); sel.text = myValue; sel.select(); } //MOZILLA/NETSCAPE suppo

javascript中字符串替换函数replace()方法与c# 、vb 替换有一点不同

1.<script language="javascript"> var str = "ajfhslajd and"; //在此我想将字母a替换成字母A alert(str.replace("a","A")); </script> 结果:是只有替换了字符串的首字符a 这不是我要的结果 看↓ 2.replace()支持正则表达式,它可以按照正则表达式的规则匹配字符或字符串,然后给予替换! <scri

javascript中字符串拼接需注意的问题

在开发中大家也都会注意尽量使用StringBuilder而不采用普通的字符串拼接方式.但是可能大部分开发者却忽略了js中也需要注意这种效率问题. 下面进行一项性能测试,用事实来说话! 复制代码 代码如下: function xntest(){ var d1=new Date(); var str=""; for(var i=0;i<10000;i++){ str+="stext"; } var d2=new Date(); document.write(&qu

JavaScript trim 去除字符串空格的三种方法(附代码详解)

方法一: 正则替换 推荐个人认为最好的方法.采用的是正则表达式,这是最核心的原理. 下面是代码原文 复制代码 代码如下: <SCRIPT LANGUAGE="JavaScript"> <!-- //出处:网上搜集 //For more visit http://www.jb51.net // Trim() , Ltrim() , RTrim() String.prototype.Trim = function() { return this.replace(/(^\s

Java 添加Word目录的2种方法示例代码详解

目录是一种能够快速.有效地帮助读者了解文档或书籍主要内容的方式.在Word中,插入目录首先需要设置相应段落的大纲级别,根据大纲级别来生成目录表.本文中生成目录分2种情况来进行: 1.文档没有设置大纲级别,生成目录前需要手动设置 2.文档已设置大纲级别,通过域代码生成目录 使用工具: •Free Spire.Doc for Java 2.0.0 (免费版) •IntelliJ IDEA 工具获取途径1:通过官网下载jar文件包,解压并导入jar文件到IDEA程序. 工具获取途径2:通过Maven仓

jquery $.trim()去除字符串空格的实现方法【附图例】

jquery $.trim()去除字符串空格的实现方法[附图例] 语法 jQuery.trim()函数用于去除字符串两端的空白字符. 作用 该函数可以去除字符串开始和末尾两端的空白字符(直到遇到第一个非空白字符串为止).它会清除包括换行符.空格.制表符等常见的空白字符. 参数 如果参数str不是字符串类型,该函数将自动将其转为字符串(一般调用其toString()方法).如果参数str为null或undefined,则返回空字符串(""). 返回值 jQuery.trim()函数的返回

javascript 实现字符串反转的三种方法

第一种方法 复制代码 代码如下: var str = "abcdef"; console.log( str.split("").reverse().join("") ): 第二种方法: 复制代码 代码如下: var str="abcdef" var i=str.length; i=i-1; for (var x = i; x >=0; x--) { document.write(str.charAt(x)); } 第三种

java 字符串分割的三种方法(总结)

最近在项目中遇到一个小问题,一个字符串分割成一个数组,类似String str="aaa,bbb,ccc"; 然后以","为分割符,将其分割成一个数组,用什么方法去实现呢? 第一种方法: 可能一下子就会想到使用split()方法,用split()方法实现是最方便的,但是它的效率比较低 第二种方法: 使用效率较高的StringTokenizer类分割字符串,StringTokenizer类是JDK中提供的专门用来处理字符串分割子串的工具类.它的构造函数如下: publ

java 字符串截取的三种方法(推荐)

众所周知,java提供了很多字符串截取的方式.下面就来看看大致有几种. 1.split()+正则表达式来进行截取. 将正则传入split().返回的是一个字符串数组类型.不过通过这种方式截取会有很大的性能损耗,因为分析正则非常耗时. String str = "abc,12,3yy98,0"; String[] strs=str.split(","); for(int i=0,len=strs.length;i<len;i++){ System.out.pri

Spark三种属性配置方式详解

随着Spark项目的逐渐成熟, 越来越多的可配置参数被添加到Spark中来.在Spark中提供了三个地方用于配置: 1.Spark properties:这个可以控制应用程序的绝大部分属性.并且可以通过 SparkConf对象或者Java 系统属性进行设置: 2.环境变量(Environment variables):这个可以分别对每台机器进行相应的设置,比如IP.这个可以在每台机器的$SPARK_HOME/ conf/spark-env.sh脚本中进行设置: 3.日志:所有的日志相关的属性可以

JS创建事件的三种方法(实例代码)

1.普通的定义方式 <input type="button" name="Button" value="确定" onclick="Sfont=prompt('请在文本框中输入红色','红色',' 提示框 '); if(Sfont=='红色'){ form1.style.fontFamily='黑体'; form1.style.color='red'; }" /> 这是最常见的一种定义方式,直接将JS事件定义在需要的

Java追加文件内容的三种方法实例代码

整理文档,搜刮出一个Java追加文件内容的三种方法的代码,稍微整理精简一下做下分享. import Java.io.BufferedWriter; import java.io.File; import java.io.FileOutputStream; import java.io.FileWriter; import java.io.IOException; import java.io.OutputStreamWriter; import java.io.RandomAccessFile;

判断python对象是否可调用的三种方式及其区别详解

查找资料,基本上判断python对象是否为可调用的函数,有三种方法 使用内置的callable函数 callable(func) 用于检查对象是否可调用,返回True也可能调用失败,但是返回False一定不可调用. 官方文档:https://docs.python.org/3/library/functions.html?highlight=callable#callable 判断对象类型是否是FunctionType type(func) is FunctionType # 或者 isinst