提升JavaScript运行速度之循环篇[译]
作者:明达 来源:七月佑安 发布时间:2009-02-20 12:54:00
根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的DOM调用。这篇着重讲第一个原因。最后给出了一个开发模式,替换传统的循环结构,可以完全避免脚本失控的状况发生。
原文标题:Speed up your JavaScript, Part 1
原文作者:Nicholas C. Zakas
在我 上一篇帖子(译文)中,谈到了各个浏览器究竟会在什么情况下弹出脚本失控提示,对于Internet Explorer来说,当浏览器执行了数量过多的语句时就会停止执行脚本,而其他的浏览器,则是持续执行脚本超过一定时间的时候就会给出提示。而我们要探讨的核心问题,不是这些浏览器如果探测失控的脚本,而是我们如何才可以让脚本运行的更快一些,从而避免这些警告。
脚本失控基本上有以下四个方面的原因:
在循环中执行了太多的操作。
臃肿的函数体
过多的递归
过多的DOM调用
在这篇帖子中,我将会把重点放到第一条上:循环中的过多操作。循环的操作是同步进行的,所以执行一个循环所花费的时间完全取决于循环的次数。因此有两种情况会导致循环执行的时间过长,并直接导致锁定浏览器。一是循环体中包含了太多的操作,二是循环的次数过多。这两种情况都能直接导致锁定浏览器,并显示脚本失控的提示。
解决这个问题的诀窍就是用下面这两个问题来评估每个循环:
这个循环必须要同步执行么?
循环里面的数据,必须要按顺序执行么?
如果两个问题的答案都是否定的话,你就可以选择将循环里的操作进行分解。关键是要根据代码的具体环境确定上面两个问题的答案。一个典型的循环可能像下面这个样子:
for(var i=0; i < items.length; i++){
process(items[i]);
}
乍一看这个循环并没有太大的问题,是不是会运行很长时间完全取决于循环的次数。如果紧接循环后没有其他代码在执行的时候需要依赖于循环的结果,那么对于第一个问题的答案就是“不”。你还可以发现,循环每次只处理一个数值,而且不依赖于上一次循环的结果,所以对于第二个问题的答案同样也是否定的。这就意味着,循环可以通过某种方式进行拆解,不会导致锁定浏览器而显示脚本失控的提示。
在《Professional JavaScript, Second Edition》这本书中,对于那些执行次数非常巨大的虚幻,我推荐使用下面的方式来处理:
function chunk(array, process, context){
setTimeout(function(){
var item = array.shift();
process.call(context, item);
if (array.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}
chunk()函数的用途就是将一个数组分成小块处理(这也是名字的由来),我们可以传递三个参数。要处理的数组对象、处理函数以及一个可选的上下文变量,用于设置process()函数中对应的this对象。第一个timer用于处理操作之间的延时(这里设置为100毫秒,大家可以根据实际需要自行修改)。每次执行这个函数,都会将数组中的第一个对象取出,并传给process()函数进行操作,如果这时process()中还有未处理完的对象,另外一个timer就会启动,用于重复等待。上面提到的循环,可以通过下面的方法使用这个函数:
chunk(items, process);
需要注意的是,在这里数组采用了队列(queue)的形式,而且在循环的过程中,每次都会发生修改。如果你要修改数组的原始状态,这里介绍两种途径:一种是通过concat()函数,在传递之前,建立一个当前数组的副本:
chunk(items.concat(), process);
另外一种选择是直接修改chunk()函数,直接在函数内部进行修改:
function chunk(array, process, context){
var items = array.concat(); //clone the array
setTimeout(function(){
var item = items.shift();
process.call(context, item);
if (items.length > 0){
setTimeout(arguments.callee, 100);
}
}, 100);
}
注意这种方法要比只保存一个索引安全的多,因为数组的内容在下次计时器生效之前可能会发生变化。
这里提到的chunk()函数,只是优化循环性能的一个起点。你可以根据需要不断改进它,让它拥有更多的功能。比如说,在数组中所有对象都处理完成以后,可以增加一个函数回调。无论你是否会按照这种方式对函数进行修改,这只是一种JavaScript的代码开发模式,可以帮助优化数组的处理性能,还可以避免那个脚本失控的警告。
猜你喜欢
- 在数据库开发方面,通过单表所表现的实现,有时候需要组合查询来找到我们需要的记录集,这时候我们就会用到连接查询。连接查询主要包括以下几个方面:
- Web_THBC 为表示层也就是页面(.aspx) BLL_THBC 为业务逻辑层 DAL_THBC 为数据库交互层 (向数据库执行SQL语
- 这个话题是应腾讯ISD同仁之邀在WebReBuild三周年交流会上做的主题分享。由于临场等原因有些问题当时没有讲明白,回来后按原有思路形成了
- 一.Memory Dumps 1).Global Area ALTER SESSION SET EVENTS ‘immediate trac
- 1. 横排往下会影响阅读速度。如12345678的单排单列数字,肯定是竖排阅读快。但多行多列的整块信息,横排并不见得就比竖排慢,比如所有简体
- 使用MySQL,安全问题不能不注意。以下是MySQL提示的23个注意事项:1。如果客户端和服务器端的连接需要跨越并通过不可信任的网络,那么就
- ASP链接MSSQL2005的链接字符串如下:Provider=SQLNCLI;Server=.\SQLEXPRESS;Database=m
- 传统的网页BBS大多是采用CGI模式实现的,它的实现要求编程者既要掌握编程语言如Perl或C等,又要了解关于CGI模式的各项技术内容,因此要
- 这个效果前些日子有人在论坛问起,今天有空研究了下。我打了原创标记,因为我在写这个方法时的确没有参考过别人的代码。我的方法其实就是层遮罩加AL
- blankzheng的blog:http://www.planabc.net/经常有朋友问我,网站要在哪些浏览器上测试?要达到怎样的兼容?我
- 错误类型: Microsoft JET Database Engine (0x80040E10) 至少一个参数没有被指定值。 原因:在写SQ
- 有些使用Z-Blog的用户询问我,怎么实现我的月光博客首页上这种自动图文混排的版式效果,今天我就详细介绍一下在Z-Blog中实现这种图文混排
- 阅读上一篇:微软建议的ASP性能优化28条守则(4)技巧 13:避免重新确定数组的维数 应尽量避免 Redim 数组。就性能而言,如果计算机
- 这个分页使用的是0游标,也就是Rs.Open Sql,Conn,0,1。但是感觉也快不了多少,10万条数据的分页时间300多豪秒之间。代码如
- 细线边框是网页中定位区分内容常用的一种方法,配合特定图片的使用,往往能够达到不错的效果,那么如何制作细线边框呢?asp之家注:现在要实现这个
- 有这么一个题目,说bt其实也不bt,为了重点突出其中的意图,特意加上了括号:var a = (++Math.P
- 一、无组件上传的原理我还是一点一点用一个实例来说明的吧,客户端HTML如下。要浏览上传附件,我们通过<input type="
- 俗话说,“工欲善其事,必先利其器”。对于前端开发工程师来说,基于Firefox丰富的Web开发辅助插件无疑就是最好的利器。下面就与大家分享2
- CSSer与其他IT职位一样,在找工作的时候,都会面临着面试官提出的问题,或者给出的试卷。一、超链接点击过后hover样式就不出现的问题?被
- 最近,我在做网页的时候,经理老是反应网页中一些栏目中没有背景图片。我说:背景图片有的,你刷新看看。但是他说:我可以刷新看看,但是你不能老是让