如何加速你的 JavaScript【Part1】：优化循环的执行_js前端代码优化如何增加循环的效率-CSDN博客

本文链接：https://blog.csdn.net/weixin_48576413/article/details/143174191

最近在阅读 Nicholas C. Zakas 的《Speed up your JavaScript》系列文章时，发现其中的技术干货非常适合我们在日常开发中优化性能。本篇将重点讲解该系列的第一部分，专注于 如何优化循环的执行，避免长时间脚本警告。

为什么会出现长时间脚本警告？

浏览器通常会在遇到长时间运行的脚本时弹出警告对话框。例如，Internet Explorer 会检测脚本执行的语句数量，而其他浏览器则基于 JavaScript 引擎运行的时间长短 来判断脚本是否运行过长。当脚本运行时间过长时，用户的操作体验会明显受损。

脚本执行时间过长通常有以下几个主要原因：

循环中的操作过多。
函数内部操作过多。
递归过深。
与 DOM 交互过于频繁。

在本文中，我们将专注于第一个问题——循环操作过多。

循环为什么会导致长时间运行？

JavaScript 中的循环是 同步执行 的，因此执行的时长与迭代次数成正比。两个主要因素导致循环执行过长：

循环体内的操作过于复杂。
循环的迭代次数过多。

当浏览器无法及时处理循环时，会弹出长时间脚本的警告。这时我们就需要考虑如何优化循环代码。

如何优化循环？

要解决这个问题，我们需要问自己两个关键问题：

循环是否必须同步执行？
循环处理的数据顺序是否重要？

如果这两个问题的答案都是“否”，那么我们就可以通过将循环的工作拆分成更小的任务来提升性能。通常的循环代码可能如下所示：

for (var i = 0; i < items.length; i++) {
    process(items[i]);
}

这个循环看起来很简单，但如果 process 函数执行时间过长，并且循环的迭代次数很多，可能会导致脚本运行过长。如果循环执行后没有代码依赖它的结果，那么第一个问题的答案就是“否”。同时，每次迭代都处理单独的数据项，彼此之间没有依赖关系，因此第二个问题的答案也是“否”。这意味着我们可以将这个循环拆解，以避免长时间运行。

使用 `chunk` 函数优化循环

在 Zakas 的书《Professional JavaScript》第二版中，他介绍了一种名为 chunk 的函数，用于处理需要大量时间的循环。以下是 chunk 函数的实现：

function chunk(array, process, context) {
    setTimeout(function() {
        var item = array.shift();
        process.call(context, item);

        if (array.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}

这个函数通过将数组的处理工作分成小块来逐步执行。它接收三个参数：

一个待处理的数组 array。
处理每个元素的函数 process。
一个可选的上下文 context，用于指定 this 的值。

每次执行时，该函数会从数组中移除第一个元素并传递给 process 函数处理。如果数组中仍有元素，定时器会继续执行，直到所有元素都被处理完毕。这样我们就能避免在一次循环中执行所有操作，从而避免长时间脚本警告。

原始的循环可以使用 chunk 函数重写为：

chunk(items, process);

如何确保原数组不被修改？

由于 chunk 函数会修改传入的数组，如果你想保留原始数组，可以使用 concat 方法创建数组的副本：

chunk(items.concat(), process);

或者可以修改 chunk 函数，自动克隆数组：

function chunk(array, process, context) {
    var items = array.concat();   // 克隆数组
    setTimeout(function() {
        var item = items.shift();
        process.call(context, item);

        if (items.length > 0) {
            setTimeout(arguments.callee, 100);
        }
    }, 100);
}