****澄清**:我不是在寻找最快的代码或优化.我想了解为什么一些似乎没有经过优化或优化的代码实际上总体上更快地运行.

简短的版本

为什么这段代码:

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 …