****澄清**:我不是在寻找最快的代码或优化。我想了解为什么一些看似未优化或优化的代码实际上通常始终运行得更快。

简短版

为什么是这段代码:

var index = (Math.floor(y / scale) * img.width + Math.floor(x / scale)) * 4;

比这个性能更好？

var index = Math.floor(ref_index) * 4;

长版

本周，Impact js 的作者发表了一篇关于渲染问题的文章:

http://www.phoboslab.org/log/2012/09/drawing-pixels-is-hard

文章中有一个函数的源代码，该函数通过访问 Canvas 中的像素来缩放图像。我想建议一些传统的方法来优化这种代码，以便在加载时缩放更短。但在测试之后，我的结果大部分时间都比原来的功能差。

我猜测这是 JavaScript 引擎在做一些智能优化，我试图更多地了解发生了什么，所以我做了一堆测试。但是我的结果非常困惑，我需要一些帮助才能理解发生了什么。

我这里有一个测试页:

http://www.mx981.com/stuff/resize_bench/test.html

jsPerf:http://jsperf.com/local-variable-due-to-the-scope-lookup

要开始测试，请单击图片，结果将显示在控制台中。

共有三种不同的版本:

原代码:

for( var y = 0; y < heightScaled; y++ ) {
    for( var x = 0; x < widthScaled; x++ ) {
        var index = (Math.floor(y / scale) * img.width + Math.floor(x / scale)) * 4;
        var indexScaled = (y * widthScaled + x) * 4;
        scaledPixels.data[ indexScaled ] = origPixels.data[ index ];
        scaledPixels.data[ indexScaled+1 ] = origPixels.data[ index+1 ];
        scaledPixels.data[ indexScaled+2 ] = origPixels.data[ index+2 ];
        scaledPixels.data[ indexScaled+3 ] = origPixels.data[ index+3 ];
    }
}

jsPerf:http://jsperf.com/so-accessing-local-variable-doesn-t-improve-performance

我对其进行优化的尝试之一:

var ref_index = 0;
var ref_indexScaled = 0
var ref_step = 1 / scale;
for( var y = 0; y < heightScaled; y++ ) {
    for( var x = 0; x < widthScaled; x++ ) {
        var index = Math.floor(ref_index) * 4;
        scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ index ];
        scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ index+1 ];
        scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ index+2 ];
        scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ index+3 ];

        ref_index+= ref_step;
    }
}

jsPerf:http://jsperf.com/so-accessing-local-variable-doesn-t-improve-performance

相同的优化代码，但每次都重新计算索引变量(混合)

var ref_index = 0;
var ref_indexScaled = 0
var ref_step = 1 / scale;
for( var y = 0; y < heightScaled; y++ ) {
    for( var x = 0; x < widthScaled; x++ ) {
        var index = (Math.floor(y / scale) * img.width + Math.floor(x / scale)) * 4;
        scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ index ];
        scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ index+1 ];
        scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ index+2 ];
        scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ index+3 ];

        ref_index+= ref_step;
    }
}

jsPerf:http://jsperf.com/so-accessing-local-variable-doesn-t-improve-performance

最后两个的唯一区别是“索引”变量的计算。 令我惊讶的是，优化版本在大多数浏览器(歌剧除外)中速度较慢。

个人测试结果(不是 jsPerf 测试):

• 歌剧

  Original:  8668ms
  Optimized:  932ms
  Hybrid:    8696ms
  

• Chrome

  Original:  139ms
  Optimized: 145ms
  Hybrid:    136ms
  

• Safari

  Original:  433ms
  Optimized: 853ms
  Hybrid:    451ms
  

• 火狐

  Original:  343ms
  Optimized: 422ms
  Hybrid:    350ms
  

经过深思熟虑，似乎通常的好做法是访问范围查找主要是局部变量。因为优化版本只调用一个局部变量，所以除了涉及的各种操作之外，调用多个变量和对象的混合代码应该更快。

那么为什么“优化”版本速度较慢？

我认为可能是因为某些JavaScript引擎没有优化优化版本，因为它不够热，但在chrome中使用--trace-opt后，似乎所有版本都正确V8编译。

在这一点上我有点无能为力，想知道是否有人知道发生了什么事？

我还在这个页面做了一些更多的测试用例:

http://www.mx981.com/stuff/resize_bench/index.html

最佳答案

虽然听起来很愚蠢，但 Math.whatever() 调用可能很难优化和内联 JS 引擎。尽可能使用算术运算(而不是函数调用)来获得相同的结果。

将以下第 4 个测试添加到 http://www.mx981.com/stuff/resize_bench/test.html

// Test 4
console.log('- p01 -');
start = new Date().getTime();
for (i=0; i<nbloop; i++) {
  var index = 0;
  var ref_indexScaled = 0
  var ref_step=1/scale;


  for( var y = 0; y < heightScaled; y++ ) {
    for( var x = 0; x < widthScaled; x++ ) {
      var z= index<<2;
      scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ z++ ];
      scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ z++ ];
      scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ z++ ];
      scaledPixels.data[ ref_indexScaled++ ] = origPixels.data[ z++ ];

      index+= ref_step;
    }
  }
}
end = new Date().getTime();
console.log((end-start)+'ms');

在 Opera Next 中产生以下数字:

• 原始 - 2311 毫秒
• 重构 - 112 毫秒
• 混合 - 2371 毫秒
• p01 - 112 毫秒

关于javascript - 访问局部变量不会提高性能，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12446978/