show hide elements

JavaScript performance comparison

Test case created by Joshua Chanthavisay and last updated

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


 
<script>
Benchmark.prototype.setup = function() {
    var myElements = new Array();
    var myListOfSurfaceColors = [ 'red', 'blue' ];
   
    function buildCanvasElementAndColorIt( aColor )
    {
    var theCanvasCSS = "position:absolute; left:0px; top:0px;";
    var theCanvas = document.createElement('canvas');
    theCanvas.style.cssText = theCanvasCSS;
    theCanvas.width = 640;
    theCanvas.height = 640;
    document.body.appendChild( theCanvas );
    var ctx = theCanvas.getContext('2d');
    ctx.fillStyle = aColor;
    ctx.fillRect( 0, 0, theCanvas.width, theCanvas.height );
    return theCanvas;
    }
   
    $('<div/>', { id:"elementContainer" } ).appendTo( 'body' );
   
    for ( var i=0; i<myListOfSurfaceColors.length; i++ )
    {
    myElements.push( buildCanvasElementAndColorIt( myListOfSurfaceColors[i] ) );
    }
};

Benchmark.prototype.teardown = function() {
    myElements = [];
    $( '#elementContainer' ).remove();
};
</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
visibility property
function swapVisibleElements( anElementToShow, anElementToHide )
{
anElementToShow.style.visibility = 'visible';
anElementToHide.style.visibility = 'hidden';
}

swapVisibleElements( myElements[0], myElements[1] );
swapVisibleElements( myElements[1], myElements[0] );
 
pending…
display property
function swapVisibleElements( anElementToShow, anElementToHide )
{
anElementToShow.style.display = 'block';
anElementToHide.style.display = 'none';
}

swapVisibleElements( myElements[0], myElements[1] );
swapVisibleElements( myElements[1], myElements[0] );
 
pending…
alpha property
function swapVisibleElements( anElementToShow, anElementToHide )
{
anElementToShow.style.alpha = 1;
anElementToHide.style.alpha = 0;
}

swapVisibleElements( myElements[0], myElements[1] );
swapVisibleElements( myElements[1], myElements[0] );
 
pending…
z-index property
function swapVisibleElements( anElementToShow, anElementToHide )
{
anElementToShow.style.zIndex = 2;
anElementToHide.style.zIndex = 1;
}

swapVisibleElements( myElements[0], myElements[1] );
swapVisibleElements( myElements[1], myElements[0] );
 
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

1 comment

Joshua Chanthavisay (revision owner) commented :

canvas frame buffer performance tests

Add a comment