提升JavaScript运行速度之循环篇[译]

作者:明达 来源:七月佑安 时间:2009-02-20 12:54:00 

根据Nicholas的说法,有四种代码会拖慢脚本的运行,并最终导致脚本失控。分别是次数过多的同步循环、庞大的函数体、不恰当的递归和不合理的DOM调用。这篇着重讲第一个原因。最后给出了一个开发模式,替换传统的循环结构,可以完全避免脚本失控的状况发生。

原文标题:Speed up your JavaScript, Part 1
原文作者:Nicholas C. Zakas

在我 上一篇帖子译文)中,谈到了各个浏览器究竟会在什么情况下弹出脚本失控提示,对于Internet Explorer来说,当浏览器执行了数量过多的语句时就会停止执行脚本,而其他的浏览器,则是持续执行脚本超过一定时间的时候就会给出提示。而我们要探讨的核心问题,不是这些浏览器如果探测失控的脚本,而是我们如何才可以让脚本运行的更快一些,从而避免这些警告。

脚本失控基本上有以下四个方面的原因:

  1. 在循环中执行了太多的操作。

  2. 臃肿的函数体

  3. 过多的递归

  4. 过多的DOM调用

在这篇帖子中,我将会把重点放到第一条上:循环中的过多操作。循环的操作是同步进行的,所以执行一个循环所花费的时间完全取决于循环的次数。因此有两种情况会导致循环执行的时间过长,并直接导致锁定浏览器。一是循环体中包含了太多的操作,二是循环的次数过多。这两种情况都能直接导致锁定浏览器,并显示脚本失控的提示。

解决这个问题的诀窍就是用下面这两个问题来评估每个循环:

  1. 这个循环必须要同步执行么?

  2. 循环里面的数据,必须要按顺序执行么?

如果两个问题的答案都是否定的话,你就可以选择将循环里的操作进行分解。关键是要根据代码的具体环境确定上面两个问题的答案。一个典型的循环可能像下面这个样子:

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的代码开发模式,可以帮助优化数组的处理性能,还可以避免那个脚本失控的警告。

标签:JavaScript,速度,循环,速度
0
投稿

猜你喜欢

  • JS通过分析userAgent属性来判断浏览器的类型及版本

    2024-05-13 10:37:17
  • Javascript防止图片拉伸的自适应处理方法

    2024-04-29 13:43:40
  • Python整型运算之布尔型、标准整型、长整型操作示例

    2021-01-28 06:39:15
  • JavaScript实现点击改变图片形状(transform应用)

    2024-05-13 09:18:32
  • Python大数据量文本文件高效解析方案代码实现全过程

    2023-01-18 04:57:01
  • Python+threading模块对单个接口进行并发测试

    2023-07-07 02:41:41
  • PHP图像处理技术实例总结【绘图、水印、验证码、图像压缩】

    2023-10-03 00:48:07
  • ASP伪造REFERER方法

    2008-07-03 12:48:00
  • Python生成九宫格图片的示例代码

    2023-03-16 20:29:38
  • perl比较两个文件字符串的实例代码

    2023-02-15 15:40:18
  • Node.js查找当前目录下文件夹实例代码

    2024-04-16 09:50:32
  • python 3.7.0 下pillow安装方法

    2023-07-09 09:47:49
  • Vue组件间的通信方式详析

    2024-05-09 15:12:29
  • MySQL5.7更改密码时出现ERROR 1054 (42S22)的解决方法

    2024-01-23 12:12:47
  • 利用ADODB.Stream使用浏览器下载服务器文件

    2008-10-09 12:42:00
  • Go本地测试小技巧解耦任务拆解

    2023-08-29 14:09:26
  • 关于vscode 默认添加python项目的源目录路径到执行环境的问题

    2022-01-29 06:00:34
  • ASP 使用Filter函数来检索数组

    2011-04-30 16:49:00
  • 如何让python的运行速度得到提升

    2023-04-26 21:48:35
  • 使用Jupyter notebooks上传文件夹或大量数据到服务器

    2023-02-26 11:49:16
  • asp之家 网络编程 m.aspxhome.com