JS 函数性能优化技巧 - 避免参数重组与优化递归函数的实践

JS函数性能优化需减少资源消耗，核心是避免参数重组和深度递归。应直接使用参数或传递选项对象，按需拷贝；对递归采用记忆化、迭代化或蹦床函数以防止栈溢出和重复计算。

JS函数性能优化，在我看来，核心在于减少不必要的资源消耗——无论是内存分配还是CPU计算周期。具体到参数重组和递归函数，这主要意味着我们要尽量避免函数内部频繁创建新的数据结构来处理参数，以及将深度递归转化为更高效的迭代形式，或者巧妙地利用缓存，从而减轻垃圾回收的压力和防止调用栈溢出。

解决方案

优化JavaScript函数的性能，尤其是针对参数处理和递归调用，需要我们对底层的执行机制有所了解，并有意识地规避一些常见的陷阱。

避免参数重组

当我们谈论参数重组，通常是指函数在接收参数后，又将其解构、复制或重新封装成新的数据结构。这在现代JS语法中非常常见，比如使用展开运算符（

...args

arguments

• 识别问题： 检查你的函数中是否频繁出现

  [...arguments]

  、

  Array.from(arguments)

  、

  ...rest

  参数，或者在函数内部为了处理参数而创建新的数组或对象。每次这样的操作，都会在堆上分配新的内存，并填充数据。
• 优化策略：
  • 直接使用参数： 如果函数的逻辑可以直接操作原始参数，就不要进行额外的重组。例如，如果只需要

    arguments[0]

    和

    arguments[1]

    ，就直接访问它们，而不是先将其转为数组。
  • 选项对象： 对于参数数量较多且可选的情况，传递一个配置对象比传递一长串散列的参数更优雅，也能避免在函数内部进行复杂的参数解析和默认值设置。
  • 按需拷贝： 只有当确实需要对参数集合进行数组方法操作（如

    map

    、

    filter

    ）时，才考虑将其转换为数组。如果只是迭代，

    for

    循环或

    for...of

    直接操作

    arguments

    或

    rest

    参数通常更高效。

  • apply

    /

    call

    的考量： 在某些场景下，

    Function.prototype.apply

    可能比展开运算符在传递大量参数时有轻微的性能优势，因为它避免了JS引擎在调用前构建一个物理数组。但现代引擎对展开运算符的优化也越来越好，通常可读性是更重要的考量。

优化递归函数

递归是解决某些问题（如树遍历、分治算法）的优雅方式，但它有两个潜在的性能陷阱：栈溢出和重复计算。

• 识别问题：

  • 栈溢出： 当递归深度过大时，每次函数调用都会在调用栈上创建一个新的栈帧。JavaScript引擎的栈空间有限，过深的递归会导致“Maximum call stack size exceeded”错误。
  • 重复计算： 许多递归函数（如经典的斐波那契数列）会重复计算相同子问题的结果，导致指数级的计算量。

• 优化策略：

  • 记忆化（Memoization）： 适用于纯函数，即给定相同的输入总是返回相同的输出。通过缓存函数调用的结果，避免重复计算。这是解决重复计算问题的有效手段。

    const memo = new Map();
    function fib(n) {
        if (n <= 1) return n;
        if (memo.has(n)) return memo.get(n);
        const result = fib(n - 1) + fib(n - 2);
        memo.set(n, result);
        return result;
    }

  • 尾调用优化（Tail Call Optimization, TCO）： 如果一个函数在执行的最后一步调用自身，并且这个调用结果直接作为当前函数的返回结果，那么理论上JS引擎可以重用当前的栈帧，从而避免创建新的栈帧。然而，需要注意的是，JavaScript对TCO的支持并不普遍，特别是在严格模式下。即使支持，也需要特定形式的尾调用。因此，这通常不是一个可靠的跨平台优化手段。

    // 概念上的尾调用优化（JS引擎不一定支持）
    function factorialTCO(n, acc = 1) {
        if (n === 0) return acc;
        return factorialTCO(n - 1, n * acc); // 尾调用
    }

  • 迭代化（Iterative Conversion）： 将递归逻辑重写为循环（

    for

    、

    while

    ）。这是最可靠的避免栈溢出的方法，虽然有时会牺牲一点代码的简洁性。

    function fibIterative(n) {
        if (n <= 1) return n;
        let a = 0, b = 1;
        for (let i = 2; i <= n; i++) {
            const temp = a + b;
            a = b;
            b = temp;
        }
        return b;
    }

  • 蹦床函数（Trampolining）： 这是一种模拟TCO的技术，通过将递归函数修改为返回一个“thunk”（一个返回下一个计算步骤的函数），然后由一个“蹦床”函数来连续执行这些thunks，直到得到最终结果。这能有效防止栈溢出，但会增加一些代码复杂性。

    function trampoline(f) {
        while (typeof f === 'function') {
            f = f();
        }
        return f;
    }
    
    function sumRecursive(n, acc = 0) {
        if (n === 0) return acc;
        return () => sumRecursive(n - 1, acc + n); // 返回一个thunk
    }
    
    // 使用方式：trampoline(sumRecursive(100000))

为什么参数重组会影响JS函数性能？

说实话，参数重组对性能的影响，往往在微观层面。但在高频调用、大数据量处理或者性能敏感的场景下，这些微观的开销就会累积成显著的瓶颈。这背后的原理其实不复杂：

1. 内存分配与垃圾回收压力： 每次你使用

   [...args]

   或

   Array.from(arguments)

   ，JavaScript引擎都会在内存堆上分配一个新的数组对象。这个过程本身需要时间。更重要的是，这些临时创建的数组在使用完毕后，就会成为垃圾，等待垃圾回收器（GC）来清理。频繁的内存分配和回收会给GC带来持续的压力，可能导致GC周期变长，进而引发应用卡顿（特别是对于一些实时性要求高的应用）。想象一下在一个循环里每次都重组参数，那内存和GC的负担是相当可观的。
2. 数据拷贝开销： 将

   arguments

   对象中的元素或现有数组中的元素复制到新创建的数组中，需要CPU执行数据拷贝操作。虽然单个元素的拷贝很快，但当参数数量多，或者操作次数多时，累积的拷贝时间就会变得不可忽视。
3. 对象属性访问：

   arguments

   对象本身是一个类数组对象，访问其元素如

   arguments[0]

   通常比访问普通数组元素稍慢，因为它需要通过原型链查找或者有额外的内部检查。虽然现代JS引擎对

   arguments

   对象做了很多优化，但将其转换为标准数组，又引入了额外的创建和拷贝成本。

所以，我个人觉得，在性能不是首要考虑因素时，为了代码的简洁性和可读性，使用展开运算符或

Array.from

如何判断并优化潜在的递归性能瓶颈？

判断递归函数是否存在性能瓶颈，通常需要一些工具辅助和对代码逻辑的深入理解。优化则需要针对性地选择策略。

判断方法：

1. 浏览器开发者工具的性能分析器： 这是最直观也最强大的工具。在Chrome的Performance面板中，你可以记录一段时间内的程序运行情况。
   • CPU火焰图（Flame Chart）： 观察调用栈的深度。如果某个递归函数在火焰图上形成一个非常高且窄的“尖峰”，那就说明它的调用栈很深，有栈溢出的风险。
   • 耗时分析： 查看哪些函数占用了最多的CPU时间。如果递归函数及其子调用占据了大部分时间，且有大量重复的函数名出现，那很可能存在重复计算的问题。
   • 内存分析： 在Memory面板中，可以查看堆内存的变化。如果递归导致内存持续增长，可能意味着每次递归调用都在创建大量未被及时释放的对象，或者栈帧占用过大。
2. 代码审查：
   • 基线条件： 检查递归的基线条件是否正确且能够被达到。错误的基线条件会导致无限递归。
   • 子问题重叠： 思考递归函数是否在不同的调用路径中重复计算了相同的子问题。例如，斐波那契数列

     fib(5)

     会计算

     fib(3)

     和

     fib(4)

     ，而

     fib(4)

     又会计算

     fib(3)

     和

     fib(2)

     ，

     fib(3)

     就被计算了两次。
   • 递归深度： 预估最坏情况下的递归深度。如果深度可能非常大（例如处理深度不可控的用户输入或数据结构），那么栈溢出的风险就很高。

优化实践：

一旦确定了递归的性能瓶颈，我们可以采取以下策略：

PDFlux

PDF内容提取+智能问答神器，结合了科研级精准的非结构化文档解析能力，以及ChatGPT的智能问答能力。

下载

1. 记忆化（Memoization）：解决重复计算

   • 原理： 对于纯函数，将每次计算的结果存储起来。当再次遇到相同的输入时，直接返回缓存的结果，避免重新计算。

   • 实现： 通常使用

     map

     或普通对象作为缓存。

     // 示例：优化斐波那契数列
     const memoizedFib = (() => {
         const cache = new Map();
         return function fib(n) {
             if (n <= 1) return n;
             if (cache.has(n)) {
                 return cache.get(n);
             }
             const result = fib(n - 1) + fib(n - 2);
             cache.set(n, result);
             return result;
         };
     })();
     
     console.log(memoizedFib(40)); // 瞬间出结果
     // console.log(fib(40)); // 如果不优化，会非常慢

   • 适用场景： 递归函数存在大量重叠子问题，且输入参数可哈希（能作为Map的key或对象的属性名）。

2. 迭代化（Iterative Conversion）：解决栈溢出

   • 原理： 将递归逻辑转换为循环结构。每次循环迭代更新状态变量，而不是通过函数调用来改变状态。
   • 实现：

     // 示例：斐波那契数列的迭代实现
     function fibIterative(n) {
         if (n <= 1) return n;
         let a = 0;
         let b = 1;
         for (let i = 2; i <= n; i++) {
             let next = a + b;
             a = b;
             b = next;
         }
         return b;
     }
     console.log(fibIterative(10000)); // 可以处理非常大的n

     // 示例：深度优先搜索（DFS）的迭代实现
     function iterativeDFS(node) {
         const stack = [node];
         const visited = new Set();
         while (stack.length > 0) {
             const current = stack.pop();
             if (visited.has(current)) continue;
             visited.add(current);
             console.log(current.value); // 处理当前节点
             // 将邻居节点推入栈中
             for (const neighbor of current.neighbors) {
                 if (!visited.has(neighbor)) {
                     stack.push(neighbor);
                 }
             }
         }
     }

   • 适用场景： 任何可能导致深层递归的场景，特别是对算法性能和稳定性有高要求的场合。

3. 蹦床函数（Trampolining）：解决栈溢出（高级）

   • 原理： 将递归函数改写为返回一个“thunk”（一个返回下一个递归步骤的函数），而不是直接进行递归调用。一个外部的“蹦床”函数会不断地执行这些thunks，直到最终结果不是一个函数为止。这有效地将调用栈的深度扁平化为一系列的函数返回和外部循环。

   • 实现：

     function trampoline(f) {
         while (typeof f === 'function') {
             f = f();
         }
         return f;
     }
     
     // 示例：一个累加函数，用蹦床避免栈溢出
     function sumRange(n, acc = 0) {
         if (n === 0) return acc;
         return () => sumRange(n - 1, acc + n); // 返回一个thunk
     }
     
     console.log(trampoline(sumRange(100000))); // 同样可以处理非常大的n

   • 适用场景： 当你想保留递归的代码结构和可读性，但又需要避免栈溢出时。它比完全迭代化更接近函数式编程风格。

选择哪种优化策略，需要根据具体问题、性能要求和代码可读性的权衡。通常，记忆化和迭代化是最常用且有效的手段。

除了参数重组和递归，还有哪些常见的JS函数性能陷阱？

除了参数重组和递归，JavaScript函数在实际应用中还有一些常见的性能陷阱，它们可能不像前两者那么明显，但同样值得我们关注。

1. 循环内创建闭包：

   • 陷阱： 在

     for

     循环或

     forEach

     等迭代器内部，如果每次迭代都创建了一个新的函数（闭包），并且这个闭包捕获了循环变量，那么就会产生大量的闭包对象。每个闭包都会占用内存，而且如果它们被长时间持有，会增加垃圾回收的负担。
   • 示例：

     // 糟糕的例子：每个setTimeout都捕获了不同的i值，但实际上共享了同一个i变量
     // 且创建了10个闭包
     for (var i = 0; i < 10; i++) {
         setTimeout(function() {
             console.log(i); // 总是输出10
         }, 100);
     }

   • 优化： 使用

     let

     声明循环变量，或使用立即执行函数表达式（IIFE）来为每次迭代创建独立的闭包作用域。如果闭包数量巨大，考虑重构逻辑，避免在循环中频繁创建函数。

     // 优化：使用let，每次迭代都有独立的i
     for (let i = 0; i < 10; i++) {
         setTimeout(function() {
             console.log(i); // 输出0到9
         }, 100);
     }

2. 不必要的DOM操作：

   • 陷阱： 直接、频繁地操作DOM元素（如修改样式、添加/删除元素）会触发浏览器重新计算布局（reflow）和重新绘制（repaint），这是非常耗性能的操作。即使是很小的DOM修改，如果次数过多，也会导致页面卡顿。
   • 优化：
     • 批量操作： 将多个DOM修改操作合并成一次。例如，先构建一个

       DocumentFragment

       ，将所有新元素添加到其中，然后一次性将

       DocumentFragment

       添加到DOM树中。
     • 缓存DOM引用： 避免在循环中重复查询DOM元素。
     • CSS动画优先： 对于动画效果，优先使用CSS动画，它们通常在独立线程中运行，性能更好。

3. 全局变量查找开销：

   • 陷阱： 访问全局变量比访问局部变量要慢，因为JavaScript引擎需要沿着作用域链向上查找。在紧密循环或高频函数中频繁访问全局变量，会带来不必要的性能损耗。

   • 优化： 在函数内部将常用的全局变量或外部作用域变量缓存到局部变量中。

     const globalConfig = { value: 100 };
     
     function processData(data) {
         // 每次调用都查找globalConfig
         // return data * globalConfig.value