image iteration methods

JavaScript performance comparison

Test case created

Info

These test cases will find the sum of all values in an image. The image used by the test cases is a default empty image so the sum will be zero. The iteration method is what is being tested.

Preparation code

<script src="http://yui.yahooapis.com/3.8.0/build/yui/yui-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.8.0/build/array-extras/array-extras-min.js"></script>
<script>
    YUI.add("gallery-composite-image",function(e,t){(function(e){"use strict";var t="f32",n="f64",r="s16",i="s32",s="s8",o="u16",u="u32",a="u8",f=!0,l=ArrayBuffer,c=DataView,h=e.Lang,p=Object,d=e.Array,v=e.cached,m=p.defineProperties,g=d.each,y=d.flatten,b=p.freeze,w=h.isArray,E=d.map,S=d.reduce,x=function(){this._init.apply(this,arguments)};e.namespace("Composite").Image=e.mix(x,{dataTypes:{f32:t,f64:n,s16:r,s32:i,s8:s,u16:o,u32:u,u8:a},defaultChannels:[a,a,a,a],defaultDimensions:[512,512],prototype:{clear:function(){var e=this;return e._data=new l(e.pixelCount*e._pixelSize),e},clone:function(){var e=this;return new x({channels:e.channels,data:e._data.slice(0),dimensions:e.dimensions,littleEndian:e._littleEndian})},eachPixelIndex:function(e){var t=this,n=t.pixelCount,r=0;for(;r<n;r+=1)e(r,t);return t},eachPixelLocation:function(e){var t=this,n=t.dimensions,r=n.length,i=0,s=t.pixelCount,o=0,u=[];for(;i<r;i+=1)u[i]=0;for(;o<s;o+=1){e(u.slice(),o,t);for(i=0;i<r;i+=1){u[i]+=1;if(u[i]<n[i])break;u[i]=0}}return t},getDataArray:function(){var e=this,t=e._dataView;return t instanceof c?function(){var t=e.channels.length,n=[];return e.eachPixelIndex(function(r){for(var i=0;i<t;i+=1)n.push(e.getValue(r,i))}),n}():d(t)},getPixelIndex:function(){return this._getPixelIndex.apply(this,y(arguments))},getPixelValues:function(e,t){var n=this;return E(t||n.channels,t?function(t){return n.getValue(e,t)}:function(t,r){return n.getValue(e,r)})},getValue:function(e,t){return this._getValue(w(e)?this.getPixelIndex(e):e,t)},setDataArray:function(e){var t=this,n=t.channels.length,r=0;return t.eachPixelIndex(function(i){for(var s=0;s<n;s+=1)t.setValue(i,s,e[r]),r+=1})},setPixelValues:function(e,t,n){var r=this;return g(n||t,n?function(n,i){r.setValue(e,n,t[i])}:function(t,n){r.setValue(e,n,t)}),r},setValue:function(e,t,n){return this._setValue(w(e)?this.getPixelIndex(e):e,t,n)},toJSON:function(){var e=this,t=e._littleEndian,n={channels:e.channels,data:e.getDataArray(),dimensions:e.dimensions};return t&&(n.littleEndian=t),n},toString:function(){return"image["+this.dimensions.join("x")+"] "+this.channels},validate:function(e){return e=e||this._data,e instanceof l&&e.byteLength===this.pixelCount*this._pixelSize},_init:function(e){e=e||{};var t=this,n=b((e.channels||x.defaultChannels).slice()),r=[],i,s=b((e.dimensions||x.defaultDimensions).slice()),o=S(s,1,function(e,t){return e*t}),u=S(n,0,function(e,t){return r.push(e),!i&&i!==null?i=t:i&&i!==t&&(i=null),e+ +t.substr(1)/8}),a=e.data,l;m(t,{channels:{enumerable:f,value:n},dimensions:{enumerable:f,value:s},pixelCount:{enumberable:f,value:o},_channelOffsets:{enumerable:f,value:b(r)},_data:{enumerable:f,get:function(){return l},set:function(e){l=e,t._dataView=x._getDataView(l,i)}},_dataType:{enumerable:f,value:i},_pixelSize:{enumerable:f,value:u}}),t._getPixelIndex=x._getGetPixelIndexMethod.apply(t,s),t._getValue=x._getGetValueMethod(r,u,i),t._setValue=x._getSetValueMethod(r,u,i),t.validate(a)?t._data=a:(t.clear(),w(a)&&t.setDataArray(a)),t._littleEndian=!!e.littleEndian}},_getDataView:function(e,t){return new(x._getDataViewConstructor(t))(e)},_getDataViewConstructor:v(function(e){switch(e){case t:return Float32Array;case n:return Float64Array;case r:return Int16Array;case i:return Int32Array;case s:return Int8Array;case o:return Uint16Array;case u:return Uint32Array;case a:return Uint8ClampedArray}return c}),_getGetPixelIndexMethod:v(function(){var e=arguments,t=e.length;return v(function(){var n=arguments,r,i=0,s,o;for(r=0;r<t;r+=1){o=n[r];for(s=r-1;s>=0;s-=1)o*=e[s];i+=o}return i})}),_getGetValueMethod:v(function(e,t,n){var r=e.length;return n?function(e,t){return this._dataView[e*r+t]}:function(n,r){return this._dataView["get"+x._getTypeName(this.channels[r])](n*t+e[r],this.littleEndian)}}),_getSetValueMethod:v(function(e,t,n){var r=e.length;return n?function(e,t,n){return this._dataView[e*r+t]=n,this}:function(n,r,i){var s=this;return s._dataView["set"+x._getTypeName(s.channels[r])](n*t+e[r],i,s.littleEndian),s}}),_getTypeName:v(function(e){var t=e.charAt(0);return(t==="f"?"Float":t==="s"?"Int":"Uint")+e.substr(1)})},f)})(e)},"",{requires:["array-extras"]});
    var image = new (YUI().use('gallery-composite-image').Composite.Image)();
</script>
<script>
Benchmark.prototype.setup = function() {
    var sum = 0;
};
</script>

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
for loops getPixelIndex
var dimensions = image.dimensions,
    height = dimensions[1],
    pixelIndex,
    width = dimensions[0],
    x,
    y;

for (y = 0; y < height; y += 1) {
    for (x = 0; x < width; x += 1) {
        pixelIndex = image.getPixelIndex(x, y);
        sum +=
            image.getValue(pixelIndex, 0) +
            image.getValue(pixelIndex, 1) +
            image.getValue(pixelIndex, 2) +
            image.getValue(pixelIndex, 3);
    }
}
pending…
for loops pixelLocation
var dimensions = image.dimensions,
    height = dimensions[1],
    pixelLocation,
    width = dimensions[0],
    x,
    y;

for (y = 0; y < height; y += 1) {
    for (x = 0; x < width; x += 1) {
        pixelLocation = [
            x,
            y
        ];
        sum +=
            image.getValue(pixelLocation, 0) +
            image.getValue(pixelLocation, 1) +
            image.getValue(pixelLocation, 2) +
            image.getValue(pixelLocation, 3);
    }
}
pending…
eachPixelIndex
image.eachPixelIndex(function (pixelIndex, image) {
    sum +=
        image.getValue(pixelIndex, 0) +
        image.getValue(pixelIndex, 1) +
        image.getValue(pixelIndex, 2) +
        image.getValue(pixelIndex, 3);
});
pending…
eachPixelLocation pixelLocation
image.eachPixelLocation(function (pixelLocation, pixelIndex, image) {
    sum +=
        image.getValue(pixelLocation, 0) +
        image.getValue(pixelLocation, 1) +
        image.getValue(pixelLocation, 2) +
        image.getValue(pixelLocation, 3);
});
pending…
eachPixelLocation pixelIndex
image.eachPixelLocation(function (pixelLocation, pixelIndex, image) {
    sum +=
        image.getValue(pixelIndex, 0) +
        image.getValue(pixelIndex, 1) +
        image.getValue(pixelIndex, 2) +
        image.getValue(pixelIndex, 3);
});
pending…
for loop pixelIndex
var pixelCount = image.pixelCount,
    pixelIndex = 0;

for (; pixelIndex < pixelCount; pixelIndex += 1) {
    sum +=
        image.getValue(pixelIndex, 0) +
        image.getValue(pixelIndex, 1) +
        image.getValue(pixelIndex, 2) +
        image.getValue(pixelIndex, 3);
}
pending…
for loops pixelIndex
var dimensions = image.dimensions,
    height = dimensions[1],
    pixelIndex = 0,
    width = dimensions[0],
    x,
    y;

for (y = 0; y < height; y += 1) {
    for (x = 0; x < width; x += 1) {
        sum +=
            image.getValue(pixelIndex, 0) +
            image.getValue(pixelIndex, 1) +
            image.getValue(pixelIndex, 2) +
            image.getValue(pixelIndex, 3);
        pixelIndex += 1;
    }
}
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

Compare results of other browsers

0 comments

Add a comment