javascript string字符串优化问题

 更新时间:2011年07月31日 20:59:38   作者:  
今天看到一个很久的帖子说string连接优化问题。于是自己也测试一下。写了个很简单的代码
复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>test</title>
<script type="text/javascript">
function winProps(){
var message = [];
var str;
var data = new Date();
var mils1 = data.getTime();
//array数组
for(var i = 0; i<500000;i++)
message.push("This window is ");
message.join(" ");
data = new Date();
var mils2 = data.getTime();
arrayMils = mils2 - mils1;
//字符串直接连接
for(var i = 0; i<500000;i++)
str+="This window is ";
data = new Date();
var mils3 = data.getTime();
stringMils=mils3-mils2;
//显示内容,不重要
var mes = [];
mes.push("时间1:");
mes.push(mils1);
mes.push("\n时间2");
mes.push(mils2);
mes.push("\n时间3");
mes.push(mils3);
mes.push("\narray所用时间");
mes.push(arrayMils>=0?arrayMils:arrayMils+1000);
mes.push("\nstr连接所用时间");
mes.push(stringMils>=0?stringMils:stringMils+1000);
alert(mes.join(" "));
}
</script>
</head>
<body>
<input type="button" value="点我" onclick="winProps();"/>
</body>

结果不像一般的说法,用array会快。在ie9,8。ff,google,搜狗等ie核心的浏览器下测试了一下,确实在数量级100000以上的测试中array方法比用“+”的方法会慢。
1000000次的结果
ie第一次(大概,ie复制不了,图就不截了)
复制代码 代码如下:

array所用时间 890
str连接所用时间 450

ie可能是内存没有回收第二次点会弹出警告,并且时间用到1400和1200,点多几次后,+=的连接方式耗时回到400,难倒是array对象没有回收?打开任务管理器,再刷新一次ie浏览器,内存降了100多m,应该研究一下ie的javascript内存回收机制。
ff
复制代码 代码如下:

时间1: 1312102053720
时间2 1312102053842
时间3 1312102053882
array所用时间 122
str连接所用时间 40

google(也复制不了数据)
array所用时间 200
str连接所用时间 100
opera
时间1: 1312102258270
时间2 1312102258460
时间3 1312102258592
array所用时间 190
str连接所用时间 132
顺便说一下,在数据到5000000后ff抛出了个异常,应该是内存溢出了。。。(ps,不是很懂)
错误: uncaught exception: 8.375396749959738e-274
在ie下测试果断警告,再后来out of memory。
当然怎么大的数据连接,在现在的网页是不可能出现,数据处理应该是在后台做的。老师的主机不敢装这么多浏览器
其实是array的jion,太消耗时间。没有加入这一句之后opera,google就显示出array的优势:
opera结果:
复制代码 代码如下:

时间1: 1312101715553
时间2 1312101715622
时间3 1312101715749
array所用时间 69
str连接所用时间 127
[code]
ie结果
array所用时间700
str连接所用时间500
ff
[code]
时间1: 1312101925895
时间2 1312101925945
时间3 1312101925979
array所用时间 50
str连接所用时间 34

google
array所用时间17
str连接所用时间100
去查查jion的机制再写吧。
ps:浏览器版本
google12.0.742.122
ff5.0.1
opera11.50
ie8.0.6001.18702
pss:ie处理速度不给力

相关文章

  • JavaScript自定义事件介绍

    JavaScript自定义事件介绍

    很多DOM对象都有原生的事件支持,向div就有click、mouseover等事件,事件机制可以为类的设计带来很大的灵活性,相信.net程序员深有体会。随着web技术发展,使用JavaScript自定义对象愈发频繁,让自己创建的对象也有事件机制,通过事件对外通信,能够极大提高开发效率
    2013-08-08
  • 原生js实现放大镜组件

    原生js实现放大镜组件

    这篇文章主要为大家详细介绍了js实现放大镜组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-01-01
  • 实现png图片和png背景透明(支持多浏览器)的方法

    实现png图片和png背景透明(支持多浏览器)的方法

    Firefox和Opera对PNG的支持非常的好,都是IE却无视PNG图片这一特性的“存在”,虽然IE7已经支持都是IE6还是不行。
    2009-09-09
  • Javascript Web Worker使用过程解析

    Javascript Web Worker使用过程解析

    这篇文章主要介绍了Javascript Web Worker使用过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-03-03
  • JS+html5实现异步上传图片显示上传文件进度条功能示例

    JS+html5实现异步上传图片显示上传文件进度条功能示例

    这篇文章主要介绍了JS+html5实现异步上传图片显示上传文件进度条功能,结合完整实例形式分析了JavaScript前端结合HTML5实现post文件上传与进度条显示相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • javascript制作的cookie封装及使用指南

    javascript制作的cookie封装及使用指南

    这篇文章主要介绍了javascript制作的cookie封装及使用指南,需要的朋友可以参考下
    2015-01-01
  • 用javascript实现计算两个日期的间隔天数

    用javascript实现计算两个日期的间隔天数

    用javascript实现计算两个日期的间隔天数...
    2007-08-08
  • JavaScript指定断点操作实例教程

    JavaScript指定断点操作实例教程

    这篇文章主要给大家介绍了关于JavaScript指定断点操作的相关资料,文中通过图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-09-09
  • js实现的光标位置工具函数示例

    js实现的光标位置工具函数示例

    这篇文章主要介绍了js实现的光标位置工具函数,结合实例形式分析了JavaScript操作textarea文本框光标位置及文本操作相关技巧,需要的朋友可以参考下
    2016-10-10
  • 纯js实现画一棵树的示例

    纯js实现画一棵树的示例

    下面小编就为大家带来一篇纯js实现画一棵树的示例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

最新评论