为什么使用for比some()或filter()更快

Question

我尝试了两种不同的方式做某事,我对性能结果感到惊讶:

我有一个函数的2个版本:

使用for:

$scope.hasBlockResult = function (IS, area, block) {
    if (!block)
        return false;
    for (var i = 0; i < $scope.filteredCartoList.length; i++) {
        if ($scope.filteredCartoList[i].informationSystem === IS 
            && $scope.filteredCartoList[i].area === area 
            && $scope.filteredCartoList[i].block === block)
            return true;
    }
    return false;
};

并使用some()功能:

$scope.hasBlockResult = function (IS, area, block) {
    if (!block)
        return false;

    return ($scope.filteredCartoList.some(function (carto) {
        if (carto.informationSystem === IS && carto.area === area && carto.block === block)
            return true;
        return false;
    }));
};

同样的事情:

之间for:

for (var i = 0; i < $scope.filteredCartoList.length; i++) {
    if ($scope.filteredCartoList[i].informationSystem == IS 
        && $scope.filteredCartoList[i].type != 'AM' 
        && $scope.filteredCartoList[i].type != 'IF' 
        && $scope.filteredCartoList[i].area == area 
        && $scope.filteredCartoList[i].block == block)
        $scope.resultList.push($scope.filteredCartoList[i]);
    }

和filter():

$scope.resultList = $scope.filteredCartoList.filter(function (carto) {
    if (carto.informationSystem == IS 
        && carto.type != 'AM' 
        && carto.type != 'IF' 
        && carto.area == area 
        && carto.block == block)
        return true;
    return false;
});

我期望filter()和some()方法比for方法更快,但在两种情况下,根据angularjs batarang性能选项卡,for更快.

Answer 1

鉴于您在评论中发布的文章(以及相关的基准),我们可以有把握地得出结论,您注意到的巨大差异是因为您所看到的基准是废话.

• 基准程序编程不相同.循环示例使用console.timeEnd和console.log,两者都是众所周知的低效率.
• 该some示例执行类型协作.
• 所有测试都在其循环中执行字符串连接.这并不一定会影响基准测试的公平性,但它确实意味着您正在测试字符串连接和访问方法.

现在,通过300个项目和300次迭代的阵列,在Chrome 44上的8GB DDR3 Intel i5笔记本电脑上消除这些因素的结果如下(从最慢到最快的方式重新排序):

OBJECT Average 0.0010666643114139636
SEEK Average 0.00593666957380871
LOOP Average 0.008436664550875625
SOME Average 0.013993332007279
FILTER Average 0.02592999837361276

这些是预期的,这就是为什么:

寻求

Seek实现为indexOf用于定位元素,然后在直接数组索引处访问该元素.确定某些东西是否等于某个值的实际方法是由浏览器实现的,所以我不知道这个方法是如何工作的,但人们会认为它本质上是一个浏览器实现的优化版本some.

环

循环方法较慢主要是因为与'seek'测试不同,循环测试遍历整个数组并执行数组访问和对象访问.搜索方法不会这样做.它在找到元素后几乎立即爆发.我不知道这是否能解释搜索和循环之间的差异,尽管我不会感到惊讶.然而,再次,搜索是浏览器实现的,因此能够进行优化 - 循环可以优化,但你仍然必须抵消它可以优化少于搜索的事实.

一些

有些具有每次迭代调用的函数调用的开销.此外,JIT编译器根本无法对此进行优化,因为JIT编译器不知道您要传递给什么some.

过滤

Filter在返回之前迭代整个数组,所以这不应该是一个惊喜.

对象访问

至少在Chrome中,对象访问速度非常快,因为对象是在类的引擎下编译的.值得一提的是,所有数组都是对象,所以使用相同的方法.

TLDR这些基准测试非常没用,因为它们的编程并不相同,而且几乎没有一个测试访问方法,但实际上还测试了字符串连接和console.log速度等其他内容.数组中的300个项目也非常小,您需要一个更大的数组来获得任何明确的结果.

Answer 2

在性能方面，没有什么比原生（原始）JavaScript更好的了。问题归结为“您是想花时间和资源通过自己动手还是只为您使用一个外部的lib来重新发明轮子？”。是的，您牺牲了加载时间和性能，但节省了时间，时间就是金钱。您也可以这样缓存数组的长度，从而使for循环更快

for (var i = 0, len = $scope.filteredCartoList.length; i < len; i++)

这将更快地工作，尤其是在IE中，因为在这里您要缓存长度$scope.filteredCartoList而不是在每次循环迭代时都对其进行计算。