innerHTML字符串拼接
2012-09-28 19:33
120 查看
通过innerHTML的方式一般来说比通过构造节点的方式效率高的多,不过构造innerHTML字符串的过程也是一个值得优化的过程。比如我现在要通过一个数组,来拼接100个列表项的innerHTML, 我们可以有几种不同的方式来构造,但是效率上可能会不同。
我们先构造一个数组用于待会要拼接的数据
//构造100条数据
var datas = [];
for(var i = 1; i <=100; i++){
datas.push('item' + i);
} 第一种最直接的,也是初学者就会想到的方式,所有项都直接用字符串拼接的方式,当然效率也最差了
var resultHtml = '';
for(var i = 0, len = datas.length; i < len; i++){
resultHtml += '<li>' + datas[i] + '</li>';
}
resultHtml = '<ul>' + resultHtml + '</ul>' 第二种稍微高级一点,有考虑过效率问题的基本会采用这种,用数组的方式把每一项压进去,最后join一下
var resultHtml = '';
var tempDatas = [];
for(var i = 0, len = datas.length; i < len; i++){
tempDatas.push('<li>' + datas[i] + '</li>');
}
resultHtml = '<ul>' + tempDatas.join('') + '</ul>'; 第三种其实也简单,只是有些人可能会想不到,当然效率也最高
var resultHtml = datas.join('</li><li>');
resultHtml = '<ul><li>' + resultHtml + '</li></ul>'; 说了以上那些,不同的字符串穿拼接方式,其实也就弄弄花哨罢了,现代浏览器其实都已做的特别好了,所以就算你是直接用+号连接字符串,效率也不差了,甚至在有的浏览器中比用数组的方式快,早期的浏览器用数组比较好
我们先构造一个数组用于待会要拼接的数据
//构造100条数据
var datas = [];
for(var i = 1; i <=100; i++){
datas.push('item' + i);
} 第一种最直接的,也是初学者就会想到的方式,所有项都直接用字符串拼接的方式,当然效率也最差了
var resultHtml = '';
for(var i = 0, len = datas.length; i < len; i++){
resultHtml += '<li>' + datas[i] + '</li>';
}
resultHtml = '<ul>' + resultHtml + '</ul>' 第二种稍微高级一点,有考虑过效率问题的基本会采用这种,用数组的方式把每一项压进去,最后join一下
var resultHtml = '';
var tempDatas = [];
for(var i = 0, len = datas.length; i < len; i++){
tempDatas.push('<li>' + datas[i] + '</li>');
}
resultHtml = '<ul>' + tempDatas.join('') + '</ul>'; 第三种其实也简单,只是有些人可能会想不到,当然效率也最高
var resultHtml = datas.join('</li><li>');
resultHtml = '<ul><li>' + resultHtml + '</li></ul>'; 说了以上那些,不同的字符串穿拼接方式,其实也就弄弄花哨罢了,现代浏览器其实都已做的特别好了,所以就算你是直接用+号连接字符串,效率也不差了,甚至在有的浏览器中比用数组的方式快,早期的浏览器用数组比较好
相关文章推荐
- js将格式化后的时间拼接成字符串
- MySQL中limit使用动态参数的解决方法(拼接SQL字符串语句来执行SQL)
- 字符串的拼接
- codewars解题笔记 —— 字符串的筛选和拼接
- Python 分割字符串与拼接字符串
- Javascript拼接HTML字符串的方法列举及思路
- [转] SQL SERVER拼接字符串(字符串中有变量)
- 字符串的拼接
- 将数据表列拼接为字符串的方法
- 拼接字符串和整型值
- JSTL 字符串拼接
- 拼接字符串改为 @字段名,防止注入攻击
- Java 5种字符串拼接方式性能比较。
- NSString拼接字符串
- Objective-c 字符串的拼接
- .NET中string与StringBuilder在字符串拼接功能上的比较
- C++ sprintf_s 字符串拼接
- Oracle 用拼接字符串更新表 测试
- 常见SQL(字符串拼接)
- c#字符串拼接