搜尋
首頁web前端js教程JavaScript 提升运行速度之循环篇 译文_javascript技巧

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

原文标题:Speed up your JavaScript, Part 1
原文作者:Nicholas C. Zakas
在我 上一篇帖子 (译文 ) 中,谈到了各个浏览器究竟会在什么情况下弹出脚本失控提示,对于Internet Explorer 来说,当浏览器执行了数量过多的语句时就会停止执行脚本,而其他的浏览器,则是持续执行脚本超过一定时间的时候就会给出提示。而我们要探讨的核心问题,不是这些浏览器如果探测失控的脚本,而是我们如何才可以让脚本运行的更快一些,从而避免这些警告 。
脚本失控基本上有以下四个方面的原因:
在循环中执行了太多的操作。
臃肿的函数体
过多的递归
过多的 DOM 调用
在这篇帖子中,我将会把重点放到第一条上:循环中的过多操作。循环的操作是同步进行的,所以执行一个循环所花费的时间完全取决于循环的次数。因此有 两种情况会导致循环执行的时间过长,并直接导致锁定浏览器。一是循环体中包含了太多的操作,二是循环的次数过多。这两种情况都能直接导致锁定浏览器,并显示脚本失控的提示。
解决这个问题的诀窍就是用下面这两个问题来评估每个循环:
这个循环必须要同步执行么?
循环里面的数据,必须要按顺序执行么?
如果两个问题的答案都是否定的话,你就可以选择将循环 里的操作进行分解。关键是要根据代码的具体环境确定上面两个问题的答案。一个典型的循环可能像下面这个样子:

复制代码 代码如下:

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

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
lambda表达式跳出循环lambda表达式跳出循环Feb 20, 2024 am 08:47 AM

lambda表达式跳出循环,需要具体代码示例在编程中,循环结构是经常使用的一种重要语法。然而,在特定的情况下,我们可能希望在循环体内满足某个条件时,跳出整个循环,而不是仅仅终止当前的循环迭代。在这个时候,lambda表达式的特性可以帮助我们实现跳出循环的目标。lambda表达式是一种匿名函数的声明方式,它可以在内部定义简单的函数逻辑。它与普通的函数声明不同,

Go语言中的循环和递归的比较研究Go语言中的循环和递归的比较研究Jun 01, 2023 am 09:23 AM

注:本文以Go语言的角度来比较研究循环和递归。在编写程序时,经常会遇到需要对一系列数据或操作进行重复处理的情况。为了实现这一点,我们需要使用循环或递归。循环和递归都是常用的处理方式,但在实际应用中,它们各有优缺点,因此在选择使用哪种方法时需要考虑实际情况。本文将对Go语言中的循环和递归进行比较研究。一、循环循环是一种重复执行某段代码的机制。Go语言中主要有三

Java Iterator 与 Iterable:迈入编写优雅代码的行列Java Iterator 与 Iterable:迈入编写优雅代码的行列Feb 19, 2024 pm 02:54 PM

Iterator接口Iterator接口是一个用于遍历集合的接口。它提供了几个方法,包括hasNext()、next()和remove()。hasNext()方法返回一个布尔值,指示集合中是否还有下一个元素。next()方法返回集合中的下一个元素,并将其从集合中删除。remove()方法从集合中删除当前元素。以下代码示例演示了如何使用Iterator接口来遍历集合:Listnames=Arrays.asList("John","Mary","Bob");Iterator

python中使用矢量化替换循环python中使用矢量化替换循环Apr 14, 2023 pm 07:07 PM

所有编程语言都离不开循环。因此,默认情况下,只要有重复操作,我们就会开始执行循环。但是当我们处理大量迭代(数百万/十亿行)时,使用循环是一种犯罪。您可能会被困几个小时,后来才意识到它行不通。这就是在python中实现矢量化变得非常关键的地方。什么是矢量化?矢量化是在数据集上实现(NumPy)数组操作的技术。在后台,它将操作一次性应用于数组或系列的所有元素(不同于一次操作一行的“for”循环)。接下来我们使用一些用例来演示什么是矢量化。求数字之和##使用循环importtimestart

5个必备的Python入门实例代码5个必备的Python入门实例代码Jan 13, 2024 am 08:39 AM

Python入门代码:学习必备的5个实例Python是一种简单易学的高级编程语言,广泛用于数据分析、机器学习、网络爬虫等领域。对于初学者来说,掌握一些基本的Python代码是很重要的。本文将介绍5个简单的实例代码,帮助初学者快速入门Python编程。打印Hello,World!print("Hello,World!")这是Python

如何处理PHP循环嵌套错误并生成相应的报错信息如何处理PHP循环嵌套错误并生成相应的报错信息Aug 07, 2023 pm 01:33 PM

如何处理PHP循环嵌套错误并生成相应的报错信息在开发中,我们经常会用到循环语句来处理重复的任务,比如遍历数组、处理数据库查询结果等。然而,在使用循环嵌套的过程中,有时候会遇到错误,如无限循环或者嵌套层数过多,这种问题会导致服务器性能下降甚至崩溃。为了更好地处理这类错误,并生成相应的报错信息,本文将介绍一些常见的处理方式,并给出相应的代码示例。一、使用计数器来

循环与迭代的奇遇记:Python 代码中的探险之旅循环与迭代的奇遇记:Python 代码中的探险之旅Feb 19, 2024 pm 08:48 PM

循环与迭代:编程中的核心概念循环和迭代是编程中必不可少的概念,它们允许程序重复执行一组指令。循环用于明确指定重复的次数,而迭代则用于遍历集合或数据结构中的元素。循环类型有三种主要类型的循环:1.for循环for循环用于当你知道重复次数时执行代码块。它的语法如下:for(初始化;条件;递增/递减){//要重复执行的代码块}例如,以下for循环打印数字1到10:for(inti=1;i

【总结分享】高效的PHP循环查询子分类的方法【总结分享】高效的PHP循环查询子分类的方法Mar 21, 2023 pm 03:49 PM

​在Web开发领域中,分类查询是一个很常见的需求,无论是电商平台还是内容管理系统,都存在着以分类为基础的数据展示方式。而随着分类层数的增加,查询子分类的任务也变得越来越复杂。本文将介绍一种高效的PHP循环查询子分类的方法,帮助开发者们轻松实现分类层次结构的管理。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

SublimeText3 英文版

SublimeText3 英文版

推薦:為Win版本,支援程式碼提示!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境