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

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

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

赞 (0)

相关推荐

  • JavaScript闭包实例详解

    一.充电 1.一切(引用类型)都是对象,对象是属性的集合. 2.函数是一种对象,但是函数却不像数组一样--你可以说数组是对象的一种,因为数组就像是对象的一个子集一样.但是函数与对象之间,却不仅仅是一种包含和被包含的关系,函数和对象之间的关系比较复杂,甚至有一点鸡生蛋蛋生鸡的逻辑. function Fn() {this.name = '王福朋';this.year = 1988;} var fn1 = new Fn(); var obj = { a: 10, b: 20 };等价于var obj

  • JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)

    一.函数作用域 1.函数作用域 就是作用域在一个"Function"里,属于这个函数的全部变量都可以在整个函数的范围内使用及复用. function foo(a) { var b = 2; function bar() { // ... } var c = 3; } bar(); // 失败 console.log( a, b, c ); // 三个全都失败 上面的"foo"函数内的几个标识符,放到函数外面访问就都会报错. 2.立即执行函数表达式 在任意代码片段外部

  • JavaScript中变量提升 Hoisting

    JavaScript中变量提升 Hoisting

    因为我在写这文章的时候,百度里找资料,找到了园友的一篇文章,写的很好,可是我写了又不想放弃,所以就在里面拿了很多东西过来!~~ [翻译]JavaScript Scoping and Hoisting希望得到大家谅解. 一.案发现场 我们先看一段很简单的代码: 复制代码 代码如下: var v='Hello World'; alert(v); 这个没有疑问吧,弹出"Hello World".OK,我们继续. 我们在看一段Code: 复制代码 代码如下: var v='Hello Worl

  • 浅析JSP的9大内置对象和4大作用域对象

    浅析JSP的9大内置对象和4大作用域对象

    一.9大内置对象 二.4大内置作用域对象 以上这篇浅析JSP的9大内置对象和4大作用域对象就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 一分钟理解js闭包

    一分钟理解js闭包

    什么是闭包? 先看一段代码: function a(){ var n = 0; function inc() { n++; console.log(n); } inc(); inc(); } a(); //控制台输出1,再输出2 简单吧.再来看一段代码: function a(){ var n = 0; this.inc = function () { n++; console.log(n); }; } var c = new a(); c.inc(); //控制台输出1 c.inc(); //

  • 深入理解js函数的作用域与this指向

    函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样... 下面是个提纲,可以直接挑你感兴趣的条目阅读. • 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法: • 函数的调用方式:直接调用,call/apply,with • 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链. • 对于直接定义的函数,this指向window. • 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回thi

  • 为什么JavaScript没有块级作用域

    为什么JavaScript没有块级作用域

    最近在看ES2015 实战,里面有句话是这么说的 JavaScript 中没有块级作用域 可能会对这个问题大家可能有点不理解,先看个例子 var a = [] for(var i = 0; i < 10; i++){ a[i] = function(){ console.log(i); } } a[6](); 我想很多人会觉得这个问题的结果是6,然而很不幸,答案是10.在试试别的呢.a[7]().a[8]().a[8]()结果都是10!! 由于JS在处理primitive的变量的时候,很多时候会

  • 分析js闭包引起的事件注册问题

    分析js闭包引起的事件注册问题

    背景:闲暇时间看了几篇关于js作用域链与闭包的文章,偶然又看到了之前遇到的一个问题,就是在for循环中为dom节点注册事件驱动,具体见下面代码: <!DOCTYPE html> <html> <head> <title>js闭包</title> <meta charset="utf-8" /> </head> <body> <button id="anchor1"&

  • 全面理解JavaScript中的闭包

    全面理解JavaScript中的闭包

    引子 闭包是有权访问另一个函数作用域中的变量的函数. 闭包是javascript中很难理解的部分,很多高级的应用都依靠闭包来实现的,我们先来看下面的一个例子: function outer() { var i = 100; function inner() { console.log(i); } } 上面代码,根据变量的作用域,函数outer中所有的局部变量,对函数inner都是可见的:函数inner中的局部变量,在函数inner外是不可见的,所以在函数inner外是无法读取函数inner的局部

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

    这篇着重讲第一个原因.最后给出了一个开发模式,替换传统的循环结构,可以完全避免脚本失控的状况发生. 原文标题:Speed up your JavaScript, Part 1 原文作者:Nicholas C. Zakas 在我 上一篇帖子 (译文 ) 中,谈到了各个浏览器究竟会在什么情况下弹出脚本失控提示,对于Internet Explorer 来说,当浏览器执行了数量过多的语句时就会停止执行脚本,而其他的浏览器,则是持续执行脚本超过一定时间的时候就会给出提示.而我们要探讨的核心问题,不是这些浏

  • Javascript学习笔记之 对象篇（四） : for in 循环

    先上范例: // Poisoning Object.prototype Object.prototype.bar = 1; var foo = {moo: 2}; for(var i in foo) { console.log(i); // prints both bar and moo } 这里我们要注意两点,一是 for in 循环会忽略 enumerable 设置为 false 的属性.例如一个数组的 length 属性.第二是,由于 for in 会遍历整个原型链,所以当原型链过长时,会

  • JavaScript自学笔记(必看篇)

    0-判断变量.参数是否初始化 if(x){} //变量被初始化了或者变量不为空或者变量不为零 1-声明函数不需要声明返回值.参数类型,句尾甚至都不需要';' function sum(i1,i2){return i1+i2} 2-直接声明匿名函数立即使用 var f=function(i1,i2){return i1+i2;}; alert(f(1,2));//普通匿名函数 alert(function(i1,i2){return i1+i2;}(3,4));//直接声明,立即使用 3-js中没

  • JavaScript提升性能的常用技巧总结【经典】

    本文讲述了JavaScript提升性能的常用技巧.分享给大家供大家参考,具体如下: 1.注意作用域 随着作用域链中的作用域数量的增加,访问当前作用域以外的变量的时间也在增加.访问全局变量总是要比访问局部变量慢,因为要遍历作用域链.  1). 避免全局查找   将在一个函数中会多次用到的全局对象存储为局部变量总是没错的. 2). 避免 with 语句  with会创建自己的作用域,因此会增加其中执行代码的作用域链的长度. 2.选择正确的方法 性能问题的一部分是和用于解决问题的算法或者方法有关的.

  • javaScript知识点总结(必看篇)

    javaScript知识点总结(必看篇)

    1.javaScript的概念:是一种表述语言,也是一种基于对象(Object)和事件驱动(EventDriven)的,安全性好的脚本语言,运行在客户端,从而减轻服务器端的负担,总结如下: 1.javaScript主要用来向HTML页面找那个添加交互行为. 2.javaScript是一种脚本语言,语法和java类似. 3.javaScript一般用来编写客户端脚本. 4.javaScript是一种解释性语言,边执行边解释. 2.javaScript由核心语法ECMAScript.浏览器对象模型(

  • JavaScript中的for循环与双重for循环详解

    for循环 for循环就是对数组的元素进行循环. 语法: for (初始化变量; 条件表达式; 迭代语句) {      需要执行的代码块: } 初始化变量:一般用来对循环变量进行初始化赋值. 条件表达式:作为循环条件,一个包含比较运算符的表达式,用来限定循环变量的边限.如果循环变量的值超出了该边限,则停止该循环语句的执行. 迭代语句:用来改变循环变量的值,从而控制循环的次数,通常是对循环变量的值进行递增或者递减的操作. for循环执行顺序: // 1. 声明变量: // 2. 判断循环执行条件

  • javascript 实例详解循环用法

    javascript 实例详解循环用法

    闲来无聊,整理了几道有关循环的简单练习题,希望对初学JS的小伙伴有所帮助. 1.打印1-100之间所有7的倍数的个数及总和 var sum=0; var n=0; for(var i=1;i<=100;i++){ if(i%7==0){ sum+=i; ++n; } } console.log("个数为:"+n+",总和为:"+sum); 运行结果: 2.假设投资的年利率为5%,从1000增到5000需要多少年? var money=1000; var i=0

  • Javascript单线程和事件循环

    Javascript单线程和事件循环

    目录 一.单线程 二.事件循环 三.事件循环的应用 四.使用代码来说明 五.setTimeout() 六.思考:劣质的优化 一.单线程 Javascript 是单线程的,意味着不会有其他线程来竞争.为什么是单线程呢? 假设 Javascript 是多线程的,有两个线程,分别对同一个元素进行操作: function changeValue() { const e = document.getElementById("ele1"); if (e) { e.value = "VAL

  • JavaScript中如何在一个循环中等待示例代码详解

    下面是如何使用for..of 循环来迭代一个数组并在循环内等待: const fun = (prop) => { return new Promise(resolve => { setTimeout(() => resolve(`done ${prop}`), 1000); }) } const go = async () => { const list = [1, 2, 3] for (const prop of list) { console.log(prop) console

  • JavaScript几种常见循环遍历使用和区别

    目录 前言 1.“for” 循环:它是最常使用的循环形式 2."for..in" 循环:为了遍历一个对象的所有键(key) 3.for..of:不能获取当前元素的索引,只是获取元素值 4.forEach:允许为数组的每个元素都运行一个函数 5.Map and Set(映射和集合) 前言 在javascript语言中经常需要使用循环语法去获取数据中的一些值,例如,我们需要将列表中的商品逐个输出,或者运行相同的代码将数字 1 到 10 逐个输出.方法也比较多,该篇将讲解常见的循环遍历的使用

随机推荐