JavaScript匿名函数循环性能差异：字面量与函数引用为何速度不同？

下面是一段JavaScript代码：

const filter = function (object, subject, match) {
    const result = [];

    let index = 0;

    for (let i = 0; i < object.length; i++) {
        let existingIndex = -1;

        for (let j = index; j < subject.length; j++) {
            if (match(object[i], subject[j])) {
                existingIndex = j;
                break;
            }
        }

        if (existingIndex === -1) {
            result.push(object[i]);
        } else {
            index = existingIndex;
        }
    }

    return result;
};

const subjectArray = Array.from({ length: 199999 }).map((_, i) => i);
const objectArray1 = Array.from({ length: 99999 }).map((_, i) => i);
const objectArray2 = Array.from({ length: objectArray1.length }).map(() => -1);

const match = (item, entry) => item === entry;

function f1() {
    console.time("f1");

    filter(subjectArray, objectArray1, (item, entry) => item === entry);

    console.timeEnd("f1");
}

function f2() {
    console.time("f2");

    filter(subjectArray, objectArray2, (item, entry) => item === entry);

    console.timeEnd("f2");
}

f1();
f2();

运行这段代码时耗时很长，但将filter(subjectArray, objectArray2, (item, entry) => item === entry)修改为filter(subjectArray, objectArray2, match)后，执行速度大幅提升。请问执行过程中发生了什么，两者的核心差异是什么？

核心原因分析 #

1. JIT编译优化的差异 #

JavaScript引擎（如V8）的即时编译器（JIT）会对频繁调用的函数做深度优化，但内联函数和预定义函数的优化优先级不同：

• 预定义的match是固定的单实例函数，JIT可以提前分析它的逻辑（仅全等比较），直接将函数逻辑内联到调用位置，彻底消除函数调用的栈帧创建、参数传递等开销。
• 内联的(item, entry) => item === entry是每次调用filter时生成的新函数实例，引擎无法提前缓存它的优化信息，只能以未优化的方式处理每次调用，无法触发JIT的高级优化。

2. 循环内的调用开销累加 #

你的代码中filter包含两层嵌套循环，内层循环会千万次调用传入的match函数：

• 使用预定义函数时，引擎通过优化可以直接执行全等比较逻辑，没有额外的函数调用损耗。
• 使用内联函数时，每次调用都要处理新函数的上下文，且引擎无法确定函数逻辑是否会变化，只能保留完整的函数调用流程，这些微小的开销累加后，会导致整体耗时剧增。

3. 函数稳定性影响优化策略 #

预定义的match是全局唯一的函数实例，引擎可以持续收集它的调用数据，进行类型反馈优化等操作，逐步提升执行效率。而内联函数每次都是新对象，引擎无法将其标记为“稳定”函数，自然无法应用这些优化。

核心差异总结 #

• 预定义函数是静态、可复用的单实例函数，能被JIT引擎深度优化，甚至消除函数调用的额外开销。
• 内联函数是动态创建的临时函数实例，每次调用都有额外的创建和调用成本，且无法触发JIT的关键优化。

内容的提问来源于stack exchange，提问作者MarTic