****澄清**：我不是在寻找最快的代码或优化。我想理解为什么一些似乎没有经过优化或优化的代码实际上通常会更快地运行。
为什么这段代码：
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
在文章中有一个函数源，它通过访问画布中的像素来缩放图像。我想建议一些传统方法来优化这种代码，以便在加载时缩短。但经过测试后，我的结果大部分时间都是最初的功能。
猜测这是正在做一些智能优化的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
最后一个的唯一区别是'index'变量的计算。 令我惊讶的是，优化版本在大多数浏览器中都比较慢（除了歌剧）。
戏
Original: 8668ms
Optimized: 932ms
Hybrid: 8696ms
铬
Original: 139ms
Optimized: 145ms
Hybrid: 136ms
Safari浏览器
Original: 433ms
Optimized: 853ms
Hybrid: 451ms
火狐
Original: 343ms
Optimized: 422ms
Hybrid: 350ms
在挖掘之后，通常的好习惯是由于范围查找而主要访问局部变量。因为优化版本只调用一个局部变量，所以除了涉及的各种操作之外，调用多个变量和对象的混合代码应该更快。
那么为什么“优化”版本更慢？
我认为这可能是因为某些JavaScript引擎没有优化Optimized版本，因为它不够热，但在Chrome中使用--trace-opt后，似乎所有版本都由V8正确编译。
此时我有点无能为力，想知道有人会知道发生了什么事吗？
我在此页面中还做了一些测试用例：
答案 0 :(得分：1)
听起来很傻，Math.whatever()调用可能很难优化和内联JS引擎。只要有可能，更喜欢算术运算（而不是函数调用）来实现相同的结果。
将以下第四项测试添加到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中产生以下数字：
答案 1 :(得分：0)
使用一些基本技术可以高度优化性能：
在循环中运行多个循环时，请使用：
while（i - ）{ / *这里的一些代码* / }
...其中i是大于0的值。
适当地缓存变量/本地化变量以最小化计算。对于较大的计算，这意味着将部分计算放在正确的抽象层。
重用变量（重新初始化开销可能成为大量数据处理的问题）。注意：这是一个糟糕的编程设计原则，但性能原则很好！
降低属性深度。使用object.property会导致性能与仅包含“object_propertyvalue”的var相关。
使用这些原则可以获得更好的性能。现在从高层次来看，你从这个函数中得到了这个函数，它在某些方面存在缺陷。因此要真正优化完整功能，而不仅仅是您所说的一行：
function resize_Test5( img, scale ) {
// Takes an image and a scaling factor and returns the scaled image
// The original image is drawn into an offscreen canvas of the same size
// and copied, pixel by pixel into another offscreen canvas with the
// new size.
var widthScaled = img.width * scale;
var heightScaled = img.height * scale;
var orig = document.createElement('canvas');
orig.width = img.width;
orig.height = img.height;
var origCtx = orig.getContext('2d');
origCtx.drawImage(img, 0, 0);
var origPixels = origCtx.getImageData(0, 0, img.width, img.height);
var scaled = document.createElement('canvas');
scaled.width = widthScaled;
scaled.height = heightScaled;
var scaledCtx = scaled.getContext('2d');
var scaledPixels = scaledCtx.getImageData( 0, 0, widthScaled, heightScaled );
// optimization start
var old_list = origPixels.data;
var image_width = img.width;
var h = heightScaled;
var w = widthScaled;
var index_old;
var index_new;
var h_scale;
var new_list = [];
var pre_index_new;
while(h--){
h_scale = Math.floor(h / scale) * image_width;
pre_index_new = h * widthScaled;
while(w--){
index_old = (h_scale + Math.floor(w / scale)) * 4;
index_new = (pre_index_new + w) * 4;
new_list[ index_new ] = old_list[ index_old ];
new_list[ index_new + 1 ] = old_list[ index_old + 1 ];
new_list[ index_new + 2 ] = old_list[ index_old + 2 ];
new_list[ index_new + 3 ] = old_list[ index_old + 3 ];
}
}
scaledPixels.data = new_list;
// optimization stop
scaledCtx.putImageData( scaledPixels, 0, 0 );
return scaled;
}