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 相关文章推荐
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
超链接怎么正确调用javascript函数
May 23 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
详解node.js搭建代理服务器请求数据
Apr 08 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
详解如何使用webpack在vue项目中写jsx语法
Nov 08 Javascript
解决linux下node.js全局模块找不到的问题
May 15 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
Element输入框带历史查询记录的实现示例
Jan 15 Javascript
Flutter 超实用简单菜单弹出框 PopupMenuButton功能
Aug 06 Javascript
详解mpvue开发微信小程序基础知识
Sep 23 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
1.PHP简介
2006/10/09 PHP
smarty section简介与用法分析
2008/10/03 PHP
apache+php完美解决301重定向的两种方法
2011/06/08 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
window.open的页面如何刷新(父页面)上层页面
2012/12/28 Javascript
Jquery倒计时源码分享
2014/05/16 Javascript
jQuery中:button选择器用法实例
2015/01/04 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
深入理解Java线程编程中的阻塞队列容器
2015/12/07 Javascript
jquery点击切换背景色的简单实例
2016/08/25 Javascript
整理关于Bootstrap表单的慕课笔记
2017/03/29 Javascript
基于jQuery ztree实现表格风格的树状结构
2018/08/31 jQuery
vuex 解决报错this.$store.commit is not a function的方法
2018/12/17 Javascript
JS实现商城秒杀倒计时功能(动态设置秒杀时间)
2019/12/12 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
详解vue 中 scoped 样式作用域的规则
2020/09/14 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python制作小说爬虫实录
2017/08/14 Python
python让列表倒序输出的实例
2018/06/25 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
Django框架models使用group by详解
2020/03/11 Python
tensorflow使用freeze_graph.py将ckpt转为pb文件的方法
2020/04/22 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
python使用隐式循环快速求和的实现示例
2020/09/11 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
爱心募捐通知范文
2015/04/27 职场文书
2015年英语教研组工作总结
2015/05/23 职场文书
关于感恩的歌曲整理(8首)
2019/08/14 职场文书
关于Numpy之repeat、tile的用法总结
2021/06/02 Python