探讨js字符串数组拼接的性能问题
这篇文章主要介绍了有关js对字符串数组进行拼接的性能问题,字符串连接一直是js中性能最低的操作之一,应该如何解决呢?请参看本文的介绍
我们知道,在js中,字符串连接是性能最低的操作之一。
例如:
text+=" World!";
早期浏览器没有对这种运算进行优化。
由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。频繁地在后台创建和销毁字符串导制性能异常低下。
因此,可以利用数组对象进行优化。
例如:
1
2
3
4
|
var buffer=[],i=0; buffer[i++]= "Hello" ; //通过相应索引值添加元素比push方法快 buffer[i++]= " World!" ; var text=buffer.join( "" ); |
在早期的浏览器中,没有创建和销毁中间字符串,在大量字符串连接情况下,这技术已被证明远快于使用加法方式。
如今浏览器对字符串的优化已经改变了字符串相连的局面。Safari、Opera、Chrome、Firefox和IE8都在使用加法运算符上表现出了更
好的性能。但是,IE8之前的版本没有优化,因此数组方法依然有效。这并不意味着字符串相连时我们要进行浏览器检测。在决定如何连接时要考虑的是字符串的
大小和数量。
当字符串相对较小(小于20字符)且连接数量也较小时(小于1000个),所有的浏览器使用加法运算符都能在不到1毫秒内轻松完成连接。增加字符串
数量或大小时,IE7中性能会明显下降。字符串大小增加时,Firefox中加法运算符和数组成技巧性能差异会变小。字符串数量增加时,Safari中加
法运算符和数组成技巧性能差异会变小。改变字符串数量或大小时,Chrome和Opera中加法运算符一直保持领先优势。
所以,由于在各浏览器下性能不一致,选用技术取决于实际情况和面对的浏览器。
大多数情况下,加法运算符是首选;如果用户主要使用IE6或7,并且字符串大小较大或数量较多时,那么数组技术就很值得。
一般情况下,如果是语义性的字符串,不应该使用Array,比如:
'Hello, my name is ' + name;
如果字符串是"相似情况的重复"的话,建议使用Array,比如:
1
2
3
4
5
|
var array = []; for (i = 0; i < length; i++) { array[i] = '<li>' + list[i] + '</li' >; } document.getElementById( 'somewhere' ).innerHTML = array.join( '\n' ); |
有关js字符串数组连接的性能比较,就介绍到这里了,希望对大家有所帮助。
探讨js字符串数组拼接的性能问题的更多相关文章
- JS 利用数组拼接html字符串
var cc = []; cc.push('<td colspan=' + fields.length + ' style="padding:10px 5px;border:0;&qu ...
- JavaScript字符串数组拼接的性能测试及优化方法
传统上,字符串连接一直是js中性能最低的操作之一. var text="Hello"; text+=" World!"; 早期浏览器没有对这种运算进行优化.由于 ...
- js字符串 数组处理
/*字符串处理*/ var a="Hello world!" console.log(a.indexOf(& ...
- JS字符串数组转换
字符串转数组: str.split(';') 数组转字符串: arr.join(';')
- js字符串数组['1','2','3']转number
let arr = ['1','2','3']; arr.split(',').map(Number);
- js对象数组中的某属性值 拼接成字符串
js对象数组中的某属性值 拼接成字符串 var objs=[ {id:1,name:'张三'}, {id:2,name:'李四'}, {id:3,name:'王五'}, {id:4,name:'赵六' ...
- 从js的repeat方法谈js字符串与数组的扩展方法
js将字符串重复N次的repeat方法的8个版本 /* *@desc: 将一个字符串重复自身N次 */ //版本1:利用空数组的join方法 function repeat(target, n) { ...
- php部分--例子:租房子(复选框的全选、数组拼接成字符串、设置复选框的name值、)
1.链接数据库 <?php include("DBDA.class.php"); $db=new DBDA(); $sql="select * from fangz ...
- 页面循环绑定(变量污染问题),js面向对象编程(对象属性增删改查),js字符串操作,js数组操作
页面循环绑定(变量污染问题) var lis = document.querySelectorAll(".ul li") for ( var i = 0 ; i < lis. ...
随机推荐
- CodeSoft随笔 批量连续打印,变量打印,codesoft条码
调用codeSoft的模板,实现批量连续打印. Code: 制作标签1.lab. 添加两个变量var0,var1. using LabelManager2; string strFile = Syst ...
- 如何运用boolean跳出循环
用布尔类型跳出循环:1.首先申明一个布尔变量:boolean y =false:申明位置在:方法内,循环外:public void s(){//在此申明布尔变量:for(){}}if(!y){}2,进 ...
- VS2012下配置OpenCV2.4.5
最近在折腾了一下VS2012的OpenCVS2.4.5配置,同VS2010下基本相同,做个简单的记录,以备日后查阅. 1. 安装OpenCV 从OpenCV官网:http://opencv.org/下 ...
- STL练习题续
//zjnu 1399 //sort 数组可用//vector sort(vector) #include<iostream> #include<algorithm> usin ...
- 使用Vs2012开发Metro时在另一台win8平板上调试的步骤
需求:开发一个metro应用,因为要给平面设计师参谋, 需要将软件安装在win8平板上. 环境:开发机是win8, win8平板是win8.1rtm , 是用老的win7平板改装的. 步骤: 1:拷 ...
- Restful.Data,现招募有为骚年,群号 338570336
光阴似箭,日月如梭,套用小学作文惯用的一句开场白来开始重新开始我的博客园生涯吧. 8年的风霜雪雨,不断的击打着我内心的哀伤,可我依旧坚挺的屹立在这里,是因为技术是我一直坚持的梦想. 追寻着先辈和高人的 ...
- javascript 设计模式-----策略模式
在<javascript设计模式>中,作者并没有向我们介绍策略模式,然而它却是一种在开发中十分常见的设计模式.最常见的就是当我们遇到一个复杂的表单验证的时候,常常需要编写一大段的if和el ...
- angular.js 例子
angular.js是一个前端的MVC框架,12年的时候曾近在一个portal平台的项目中使用过. 下面给出一个angular.js的典型例子,涵盖一些基础的知识点,用以复习备忘: <html ...
- Newtonsoft.Json中的时间格式详解.
Newtonsoft.json是一款不错的序列化反序列化第三方组件,具体如何使用属于基础知识,此处不再讲解.看以下代码: public class OutgameEntity { public str ...
- 价值1400美元的CEH(道德黑客)认证培训课程长啥样?(3)工具集
美元的CEH(道德黑客)认证培训课程长啥样?(3)工具集 这是我收到的CEH官方发来的邮件,参加CEH认证培训原价为1424.25刀,可以给我便宜到1282刀.只有一个感觉,心在流血.站在这价值120 ...