首页  韩国资源  酷站加油  我的展厅  设计名站  古典元素  推荐下载  设计欣赏  每周专访  招募精英  人才专区  网页教程  平面设计  编程开发  设计竞赛
当前位置:首页 > 网页教程 > HTMLCSS教程 > 正文
提升JavaScript运行速度之函数篇
来源:cuimingda.com 作者:明达 2009年02月25日 11:48 网友评论:0条 点击:

这篇是Nicholas讨论如果防止脚本失控的第二篇,主要讨论了如何重构嵌套循环、递归,以及那些在函数内部同时执行很多子操作的函数。基本的思想和上一节trunk()那个例子一致,如果几个操作没有特定的执行顺序,而且互相不是依赖关系,我们就可以通过异步调用的方式加以执行,不止可以减少执行的次数,还可以防止脚本失控。本文还介绍了通过memoization技术取代递归的方法。

【原文标题】Speed up your JavaScript, Part 2
【原文作者】Nicholas C. Zakas

以下是对原文的翻译

上周我在《too much happening in a loop》(译文)这篇文章中介绍了JavaScript运行时间过长的第一个原因。相似的情况有时也出现在函数的定义上,函数也可能因为使用不当而过载使用。通常情况是函数内包含了过多的循环(不是在循环中执行了过多的内容),太多的递归,或者只不过是太多不相干但又要一起执行的操作。

太多的循环经常是以嵌套的形式出现,这种代码会一直占用JavaScript引擎直至循环结束。这方面有一个非常著名的例子,就是使用冒泡算法排序。由于JavaScript有内置的sort()方法,我们没有必要使用这种方式进行排序,但我们可以借助这个算法理解嵌套循环占用资源的症结所在,从而避免类似情况的发生。下面是一个在JavaScript使用冒泡排序法的典型例子:

function bubbleSort(items) {
for (var i = items.length - 1; i >= 0; i--) {
   for (var j = i; j >= 0; j--) {
       if (items[j] < items[j - 1]) {
           var temp = items[j];
           items[j] = items[j - 1];
           items[j - 1] = temp;
       }
   }
}
}

回忆一下你在学校学习的计算机知识,你可能记得冒泡排序法是效率最低的排序算法之一,原因是对于一个包含n个元素的数组,必须要进行n的平方次的循环操作。如果数组中的元素数非常大,那么这个操作会持续很长时间。内循环的操作很简单,只是负责比较和交换数值,导致问题的最大原因在于循环执行的次数。这会导致浏览器运行异常,潜在的直接结果就是那个脚本失控的警告对话框。

几年前,Yahoo的研究员Julien Lecomte写了一篇题为《Running CPU Intensive JavaScript Computations in a Web Browser》的文章,在这篇文章中作者阐述了如何将很大的javaScript操作分解成若干小部分。其中一个例子就是将冒泡排序法分解成多个步骤,每个步骤只遍历一次数组。我对他的代码做了改进,但方法的思路还是一样的:

function bubbleSort(array, onComplete) {
var pos = 0; (function() {
var j, value;
for (j = array.length; j > pos; j--) {
if (array[j] < array[j - 1]) {
value = data[j];
data[j] = data[j - 1];
data[j - 1] = value;
}
}
pos++;
if (pos < array.length) {
setTimeout(arguments.callee, 10);
} else {
onComplete();
}
})();
}

这个函数借助一个异步管理器来实现了冒泡算法,在每次遍历数组以前暂停一下。onComplete()函数会在数组排序完成后触发,提示用户数据已经准备好。bubbleSort()函数使用了和chunk()函数一样的基本技术(参考我的上一篇帖子),将行为包装在一个匿名函数中,将 arguments.callee传递给setTimeout()以达到重复操作的目的,直至排序完成。如果你要将嵌套的循环拆解成若干个小步骤,以达到解放浏览器的目的,这个函数提供了不错的指导意见。

首页 上一页 [1] [2] 下一页 尾页
上一篇:打造自己的Reset.css   下一篇:完美的CSS绝对底部
收藏此页】【打印】【关闭
 相关文章  我要点评
·JavaScript中的对象与函数和继承
·JavaScript优化细节
·让JavaScript拯救HTML5的离线存储
·FF和IE之间7个JavaScript的差异
·javascript修正12个浏览器兼容问题
·JavaScript的私有成员
·说说掌握JavaScript语言的思想前提
·JavaScript图片切换展示效果

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 在线反馈 | 广告报价 | 友情链接 | 联系我们 | 免责声明 | 在线投稿 | 网站地图
Copyright © 2003-2009 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】