show hide elements

JavaScript performance comparison

Revision 3 of this test case created by Joshua Chanthavisay

Preparation code

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

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] ) );
}

Preparation code output

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; } $('
', { id:"elementContainer" } ).appendTo( 'body' ); for ( var i=0; i

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:

0 comments

Add a comment