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


Posted in Javascript onAugust 15, 2009

这篇着重讲第一个原因。最后给出了一个开发模式,替换传统的循环结构,可以完全避免脚本失控的状况发生。

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

Javascript 相关文章推荐
JavaScript 动态添加表格行 使用模板、标记
Oct 24 Javascript
jquery 常用操作方法
Jan 28 Javascript
jQuery的实现原理的模拟代码 -3 事件处理
Aug 03 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
JavaScript中document.forms[0]与getElementByName区别
Jan 21 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 Javascript
详解vue-validator(vue验证器)
Jan 16 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vue中添加与删除关键字搜索功能
Oct 12 Javascript
jQuery ui 1.7更新小结
Aug 15 #Javascript
IE8 下的Js错误HTML Parsing Error...
Aug 14 #Javascript
jQuery 判断页面元素是否存在的代码
Aug 14 #Javascript
JavaScript写的一个DIV 弹出网页对话框
Aug 14 #Javascript
使用JQuery和s3captche实现一个水果名字的验证
Aug 14 #Javascript
img标签中onerror用法
Aug 13 #Javascript
什么是JavaScript
Aug 13 #Javascript
You might like
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
Javascript开发之三数组对象实例介绍
2012/11/12 Javascript
Extjs4 类的定义和扩展实例
2013/06/28 Javascript
Js中获取frames中的元素示例代码
2013/07/30 Javascript
基于jquery实现的定时显示与隐藏div广告的实现代码
2013/08/22 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
js针对ip地址、子网掩码、网关的逻辑性判断
2016/01/06 Javascript
JS操作JSON方法总结(推荐)
2016/06/14 Javascript
JavaScript自学笔记(必看篇)
2016/06/23 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
利用Javascript裁剪图片并存储的简单实现
2017/03/13 Javascript
微信小程序 wx:for的使用实例详解
2017/04/27 Javascript
Vue中组件之间数据的传递的示例代码
2017/09/08 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
Vue 组件的挂载与父子组件的传值实例
2020/09/02 Javascript
python让列表倒序输出的实例
2018/06/25 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
python动态进度条的实现代码
2019/07/03 Python
python实现的登录与提交表单数据功能示例
2019/09/25 Python
numpy:np.newaxis 实现将行向量转换成列向量
2019/11/30 Python
python脚本实现mp4中的音频提取并保存在原目录
2020/02/27 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Pygame框架实现飞机大战
2020/08/07 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
Python中qutip用法示例详解
2020/10/02 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
Lowe’s加拿大:家居装修、翻新和五金店
2019/12/06 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
特岗教师个人总结
2015/02/10 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
反腐倡廉观后感
2015/06/08 职场文书