如何提升JavaScript操作DOM的效率.docVIP

如何提升JavaScript操作DOM的效率 Nicholas为您讲解如何提升JavaScript操作DOM的效率！ 在Web开发中，JavaScript的一个很重要的作用就是对DOM进行操作，可 你知道么？对DOM的操作是非常昂贵的，因为这会导致浏览器执行回流操作，而执行了过多的回流操作，你就会发现自己的网站变得越来越慢了，我们应该尽可能 的减少DOM操作。本文是这个系列的最后一篇，给出了一些指导性原则，比如在什么时候应该对DOM可以进行什么样的操作等。 在过去的几周中，我为大家介绍了几种可以加快JavaScript脚本运行速度的技术。 ? 脚本失控基本上有以下四个方面的原因： ? 1. 在循环中执行了太多的操作。 ? 2. 臃肿的函数体 ? 3. 过多的递归 ? 4. 过多的DOM调用 ? 在 这篇帖子中，我将会把重点放到第一条上：循环中的过多操作。循环的操作是同步进行的，所以执行一个循环所花费的时间完全取决于循环的次数。因此有两种情况 会导致循环执行的时间过长，并直接导致锁定浏览器。一是循环体中包含了太多的操作，二是循环的次数过多。这两种情况都能直接导致锁定浏览器，并显示脚本失 控的提示。 ? 解决这个问题的诀窍就是用下面这两个问题来评估每个循环： ? 1. 这个循环必须要同步执行么？ ? 2. 循环里面的数据，必须要按顺序执行么？ ? 如果两个问题的答案都是否定的话，你就可以选择将循环里的操作进行分解。关键是要根据代码的具体环境确定上面两个问题的答案。一个典型的循环可能像下面这个样子： ? 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);} 注意这种方法要比只保存一个索引安全的多，因为数组的内容在下