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 次需要的时间：

赞 (0)

相关推荐

  • 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>'); 那么今天的目的就是教大家怎么去实现一个这样

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

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

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

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

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

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

  • 在光标处插入字符串的实现代码 兼容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中字符串拼接需注意的问题

    在开发中大家也都会注意尽量使用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下高性能字符串连接StringBuffer类

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

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

    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

  • FluentMybatis实现mybatis动态sql拼装和fluent api语法

    FluentMybatis实现mybatis动态sql拼装和fluent api语法

    目录 开始第一个例子: Hello World 新建演示用的数据库结构 创建数据库表对应的Entity类 运行测试来见证Fluent Mybatis的神奇 配置spring bean定义 使用Junit4和Spring-test来执行测试 开始第一个例子: Hello World 新建Java工程,设置maven依赖 新建maven工程,设置项目编译级别为Java8及以上,引入fluent mybatis依赖包. <dependencies> <!-- 引入fluent-mybatis

  • java递归实现拼装多个api的结果操作方法

    工作需要,经常需要实现api接口,但每次都是大同小异,我就考虑是否可以将这种重复性的工作配置化. 我就写一个模板api,然后所有的HTTP请求过来,根据不同的配置返回不同结果. 最开始考虑的是比较简单的,来一个api需求,我就去MySQL查一条这个api对应的SQL,然后拿SQL去取结果,返回. 这个不难. 关键是实际需求中,有很多api返回的数据很复杂,比如渲染地图的接口,一般一条SQL搞不定. 那我就想,那我能不能实现api的拼装呢,你看到我只是调用了一个API,但是我给你返回的结果,其实是

  • java String 转成Double二维数组的方法

    WHY 朋友在群里求助一个问题,问题原型是这样的: String str = "{{10.14, 11.24, 44.55, 41.01},{12.10, 14.21, 52.14, 50.44},{14.44, 16.12, 45.42, 47.55}}"; 转成double[][]{ {10.14, 11.24, 44.55, 41.01}, {12.10, 14.21, 52.14, 50.44}, {14.44, 16.12, 45.42, 47.55} } 也就是把一个可以转

  • Oracle实现动态SQL的拼装要领

    虽说Oracle的动态SQL语句使用起来确实很方便,但是其拼装过程却太麻烦.尤其在拼装语句中涉及到date类型字段时,拼装时要加to_char先转换成字符,到了sql中又要使用to_date转成date类型和原字段再比较. 例如有这样一个SQL语句: select '========= and (t.created>=to_date('''||to_char(sysdate,'yyyy-mm-dd')||''',''yyyy-mm-dd'') AND t.created< to_date(''

  • js实现接收表单的值并将值拼在表单action后面的方法

    本文实例讲述了js实现接收表单的值并将值拼在表单action后面的方法.分享给大家供大家参考,具体如下: 今天遇到一个问题,在form表单中有若干个input,其中有一个上传文件的input,现在需要在点击提交按钮时,将不是文件类型的input的值得到并拼成&name=value的格式加在action后面,这样就能一同传出去了 <form id="myform" name="myform" method="post" action=

  • js与jQuery实现获取table中的数据并拼成json字符串操作示例

    本文实例讲述了js与jQuery实现获取table中的数据并拼成json字符串操作.分享给大家供大家参考,具体如下: 核心代码如下: JavaScript代码: function tabToJSON(id) { var trs = document.getElementById(id).getElementsByTagName("tr");//获得tr数组 var titles = trs[0].getElementsByTagName("td"); //获得表头t

  • Java中byte[]、String、Hex字符串等转换的方法

    代码如下所示: /*输入一个byte和byte[]合并为byte[]*/ public byte[] byteMerger(byte byte_1, byte[] byte_2) { byte[] byte_3 = new byte[1 + byte_2.length]; byte_3[0] = byte_1; System.arraycopy(byte_2, 0, byte_3, 1, byte_2.length); return byte_3; } /*输入一个byte[]和byte[]合并

  • C++中string替换所有指定字符串的方法

    C++的string提供了replace方法来实现字符串的替换,但是对于将字符串中某个字符串全部替换这个功能,string并没有实现,我们今天来做的就是这件事. 首先明白一个概念,即string替换所有字符串,将"12212″这个字符串的所有"12″都替换成"21″,结果是什么? 可以是22211,也可以是21221,有时候应用的场景不同,就会希望得到不同的结果,所以这两种答案都做了实现,代码如下: # include # include using namespace st

随机推荐