博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
拼装html字符串的最快方法
阅读量:4605 次
发布时间:2019-06-09

本文共 865 字,大约阅读时间需要 2 分钟。

原文地址:http://www.9demo.com/archives/488
第一种:逐个字符串相加
var
 arr 
=
 [
'
item 1
'
'
item 2
'
'
item 3
'
, ],
list 
=
 
''
;
ExpandedBlockStart.gifContractedBlock.gif
for
 (
var
 i 
=
 
0
, l 
=
 arr.length; i 
<
 l; i
++
{
list 
+= '<li>' + arr[i] + '</li>';
}
list 
=
 
'
<ul>
'
 
+
 list 
+
 
'
</ul>
'
;
这种最常见的,但是效率最低!代码逻辑相对来说复杂。
第二种:逐个 push 进数组
ContractedBlock.gif
ExpandedBlockStart.gif
Code
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] + '</li>';
}
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()),不管它后面是怎么实现的,一般都比其他方法快很多,而且代码非常简洁。

浏览器性能

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

转载于:https://www.cnblogs.com/Max-Gan/archive/2009/09/24/1573119.html

你可能感兴趣的文章
Matlab画图-非常具体,非常全面
查看>>
365. Water and Jug Problem
查看>>
SQL数据库数据检索top和distinct
查看>>
平衡搜索树--红黑树 RBTree
查看>>
sqlite驱动下载
查看>>
让IE6/IE7/IE8浏览器支持CSS3属性
查看>>
队列实现霍夫曼树
查看>>
【Java】图片高质量缩放类
查看>>
详解定位与定位应用
查看>>
【前端开发】 5分钟创建 Mock Server
查看>>
java 从键盘录入的三种方法
查看>>
使用jQuery和YQL,以Ajax方式加载外部内容
查看>>
pyspider 示例
查看>>
电路板工艺中的NPTH和PTH
查看>>
JNI实现JAVA和C++互相调用
查看>>
JAVA 笔记(一)
查看>>
js 循环读取 json的值
查看>>
c# 范型Dictionary实用例子
查看>>
C#实现动态页面静态化
查看>>
可选参数、命名参数、.NET的特殊类型、特性
查看>>