Find Highest z-index

JavaScript performance comparison

Revision 2 of this test case created

Preparation code

<style type="text/css">
  #test1 {z-index: 50; position: aboslute;}
  #test2 {z-index: 1000; position: absolute;}
</style>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div id="test1">Test 1</div>
<div id="test1">Test 2</div>
<div style="z-index: 25; position: absolute;">Test 3</div>
<div style="z-index: 5; position: absolute;">Test 4</div>
<div style="z-index: 250; position: absolute;">Test 5</div>
<div style="z-index: 500; position: absolute;">Test 6</div>
<div style="z-index: 525; position: absolute;">Test 7</div>
<div style="z-index: 550; position: absolute;">Test 8</div>
<div style="z-index: 750; position: absolute;">Test 9</div>
<div style="z-index: 999; position: absolute;">Test 10</div>
<div><div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
  Benchmark.prototype.setup = function() {
    function findHighestZIndex_way1() {
        var zIndex, els, x, xLen, el, val;
        zIndex = 0;
        els = document.querySelectorAll('*');
        for (x = 0, xLen = els.length; x < xLen; x += 1) {
            el = els[x];
            val = window.getComputedStyle(el).getPropertyValue('z-index');
            if (val) {
                val = +val;
                if (val > zIndex) {
                    zIndex = val;
                }
            }
        }
        return zIndex;
    }
    
    function findHighestZIndex_way2() {
        var zIndex, els, x, xLen, el, val;
        zIndex = 0;
        els = document.querySelectorAll('*');
        for (x = 0, xLen = els.length; x < xLen; x += 1) {
            el = els[x];
            if (window.getComputedStyle(el).getPropertyValue('position') !== 'static') {
                val = window.getComputedStyle(el).getPropertyValue('z-index');
                if (val) {
                    val = +val;
                    if (val > zIndex) {
                        zIndex = val;
                    }
                }
            }
        }
        return zIndex;
    }
    function findHighestZIndex_way3() {
        var zIndex, els, x, xLen, el, val;
        zIndex = 0;
        els = document.getElementsByTagName('*');
        for (x = 0, xLen = els.length; x < xLen; x += 1) {
            el = els[x];
            val = window.getComputedStyle(el).getPropertyValue('z-index');
            if (val) {
                val = +val;
                if (val > zIndex) {
                    zIndex = val;
                }
            }
        }
        return zIndex;
    }
    
    function findHighestZIndex_way4() {
        var zIndex, els, x, xLen, el, val;
        zIndex = 0;
        els = document.getElementsByTagName('*');
        for (x = 0, xLen = els.length; x < xLen; x += 1) {
            el = els[x];
            if (window.getComputedStyle(el).getPropertyValue('position') !== 'static') {
                val = window.getComputedStyle(el).getPropertyValue('z-index');
                if (val) {
                    val = +val;
                    if (val > zIndex) {
                        zIndex = val;
                    }
                }
            }
        }
        return zIndex;
    }
  };
</script>

Preparation code output

Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10
Test 1
Test 2
Test 3
Test 4
Test 5
Test 6
Test 7
Test 8
Test 9
Test 10

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
zIndex Only
 
findHighestZIndex_way1();
 pending…
Test Position First
 
findHighestZIndex_way2();
 pending…
zIndex Only TagName Way
 
findHighestZIndex_way3();
 pending…
Test Position First TagName Way
 
findHighestZIndex_way4();
 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