关于javascript字符串连接性能

简介:

最近在看《高性能网站建设进阶指南》,第七章为《编写高效的javascript》,作者为Nicholas C. Zakas(同时也是《javascript高级程序设计》的作者),里面讲到字符串连接的优化问题。

字符串连接一直是javascript中性能最低的操作之一,通常情况下,字符串连接是通过使用加法运算符(+)来实现的,比方说

var text="hello";
text+=" ";
text+="world!";

早期浏览器没有对这种运算进行优化。由于字符串是不可变的,这意味着要创建中间字符串来存储连接的结果。参照《javascript高级程序设计》,大致要经过以下几个步骤:

创建存储"hello"的字符串。 创建存储"world"的字符串。 创建存储连接结果的字符串。 把str的当前内容复制到结果中。 把"world "复制到结果中。 更新str,使它指向结果。

频繁地在后台创建和销毁字符串会导致字符串连接的性能异常低下。

好在如今大部分浏览器已经对字符串连接进行了优化。第一款进行优化的浏览器是Firefox,从1.0版本开始,在所有情况下使用数组技术实际上都 比使用加法运算慢。其他浏览器也优化了字符串连接,Safari、Opera、Chrome和Internet Explorer8也都在使用加法运算符上表现出了更好的性能。(PS:在Ie8之前的版本没有进行优化)

那么,在浏览器还未对字符串连接性能进行优化之前,该怎么改进其性能呢?其中一种普遍使用的方法就是使用Array对象,方法如下:

function StringBuffer(){

    this._strings=new Array();

}

StringBuffer.prototype.append=function(str){

    this._strings.push(str)

}

StringBuffer.prototype.toString=function(){

    return this._strings.join("");

}

这样,无论在数组中引入多少字符串都不成问题,因为只有在调用join()方法时才会发生连接操作,此时步骤如下:

创建存储结果的数组 把每个字符串复制到结果中的合适位置 将数组合并成字符串返回

经过测试,采用上述方法,在Firefox 3.6中以及Ie 8中,性能其实比直接用加法运算符(+)效率要低(上文说过现在大部分主流浏览器都已经经过优化),然而,在IE 8之前版本的IE浏览器中,采用这种方法连接字符串,性能比直接用加法运算符(+)有很大的提高,大概是60%左右(也就是花费的时间为原来的1/3左 右),用的是《javascript高级程序设计》里的测试代码:

 var d1=new Date();
 var str="";
 for(var i=0;i<10000;i++){
     str+="text";
 }
 var d2=new Date();
 var d3=d2.getTime()-d1.getTime();

 
 var buffer=new StringBuffer();
 d1=new Date();
 for(var j=0;j<10000;j++){
     buffer.append("text");
 }
 var result=buffer.toString();
 d2=new Date();
 var d4=d2.getTime()-d1.getTime();

 alert("d3:"+d3+" d4:"+d4);

 

以下是Nicholas C. Zakas大牛对决定如何连接字符串的建议,需要考虑两个因素:(1)被连接的字符串大小(2)数量

当字符串较小(少于20个字符)且连接的数量也较小时(少于1000个),所有的浏览器中使用的加法运算符都能在不到1毫秒之内轻松完成连接。在这种情况下就没有理由去考虑加法运算符以外的方式了。

 

增加连接字符串的数量或大小时,在IE 7中性能会明显下降。当字符串大小增加时,在Firefox中加法运算符和数组技术的性能差异会变小。当字符串连接数量增加时,在Safari中这两种技 术的新能差异也同样会变小。只有Chrome和Opera在改变连接字符串的大小和数量时,加法运算符一直保持着显著的性能优势。

 

由于在各浏览器下性能不一致,所以选用哪种技术在很大程度上取决与实际情况和面对的浏览器。如果用户主要使用IE 6或7,那么使用数组技术就很值得,因为这会影响大多数人。(备注:目前国内使用IE 6的人不少。。。)通常使用数组技术在其他浏览器中的性能损失要远小于在IE中的性能提升,所以要基于用户的浏览器来权衡用户体验,而不要视图去针对某种具体情况或浏览器版本。不过,在大多数情况下,加法运算符也是首选的。

 

 

 


相关文章
|
2月前
|
前端开发 JavaScript Java
JavaScript闭包深入剖析:性能剖析与优化技巧
JavaScript 闭包是强大而灵活的特性,广泛应用于数据封装、函数柯里化和事件处理等场景。闭包通过保存外部作用域的变量,实现了私有变量和方法的创建,提升了代码的安全性和可维护性。然而,闭包也可能带来性能问题,如内存泄漏和执行效率下降。为优化闭包性能,建议采取以下策略:及时解除对不再使用的闭包变量的引用,减少闭包的创建次数,使用 WeakMap 管理弱引用,以及优化闭包结构以减少作用域链查找的开销。在实际开发中,无论是 Web 前端还是 Node.js 后端,这些优化措施都能显著提升程序的性能和稳定性。
141 70
|
5月前
|
算法 JavaScript 前端开发
垃圾回收机制对 JavaScript 性能的影响有哪些?
【10月更文挑战第29天】垃圾回收机制对JavaScript性能有着重要的影响。开发者需要了解不同垃圾回收算法的特点和性能开销,通过合理的代码优化和内存管理策略,来降低垃圾回收对性能的负面影响,提高JavaScript程序的整体性能。
|
1月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
1月前
|
JavaScript 前端开发 Java
深入理解 JavaScript 中的 Array.find() 方法:原理、性能优势与实用案例详解
Array.find() 是 JavaScript 数组方法中一个非常实用和强大的工具。它不仅提供了简洁的查找操作,还具有性能上的独特优势:返回的引用能够直接影响原数组的数据内容,使得数据更新更加高效。通过各种场景的展示,我们可以看到 Array.find() 在更新、条件查找和嵌套结构查找等场景中的广泛应用。 在实际开发中,掌握 Array.find() 的特性和使用技巧,可以让代码更加简洁高效,特别是在需要直接修改原数据内容的情形。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
1月前
|
前端开发 JavaScript 大数据
关于JavaScript性能问题的误解
JavaScript 是单线程语言,代码逐行执行,遇到大数据量计算可能影响性能。前端同事担心遍历大量数据会导致性能问题,但实际上,即使遍历1000、10000条数据,耗时也较少。测试代码执行时间有三种方法:Date.now、console.time 和 performance.now,其中 performance.now 精度最高。开发中不必过度担忧遍历带来的性能损耗,保持代码清晰更重要。
|
5月前
|
监控 JavaScript 算法
如何使用内存监控工具来定位和解决Node.js应用中的性能问题?
总之,利用内存监控工具结合代码分析和业务理解,能够逐步定位和解决 Node.js 应用中的性能问题,提高应用的运行效率和稳定性。需要耐心和细致地进行排查和优化,不断提升应用的性能表现。
251 77
|
5月前
|
存储 缓存 JavaScript
如何优化Node.js应用的内存使用以提高性能?
通过以上多种方法的综合运用,可以有效地优化 Node.js 应用的内存使用,提高性能,提升用户体验。同时,不断关注内存管理的最新技术和最佳实践,持续改进应用的性能表现。
238 62
|
5月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
139 63
|
5月前
|
JavaScript 前端开发
CSS3 动画和 JavaScript 动画的性能比较
具体的性能表现还会受到许多因素的影响,如动画的复杂程度、浏览器的性能、设备的硬件条件等。在实际应用中,需要根据具体情况选择合适的动画技术。
|
3月前
|
JavaScript 前端开发 开发者
JavaScript字符串的常用方法
在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。
79 13
下一篇
oss创建bucket