tedtestDom

JavaScript performance comparison

Test case created by Ted

Info

Test Dom

Preparation code

<div id="popup">
  <button id="p">
    prev
  </button>
  <button id="n">
    next
  </button>
  <button id="h">
    Home
  </button>
  <iframe src="">
  </iframe>
</div>
<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.js">
</script>
<script src="//ajax.googleapis.com/ajax/libs/yui/2.9.0/build/yuiloader/yuiloader-min.js">
</script>
<script src="//cdn.ext/library.js">
</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
javascript
 
YUI().use('node', function(Y) {
  var display, index;
  var next, prev;
  var url = ["a.html", "b.html", "c.html", "d.html", "e.html"];
  var l = Y.all("iframe").size();
  var nifr = document.createElement("iframe");
  nifr.setAttribute("src", url[l]);
  next = function() {
    display = Y.all("iframe").getStyle("display");
    index = display.indexOf("inline");
    if (index + 1 < display.length) {
      Y.all("iframe").item(index + 1).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    } else {
      Y.one("#popup").appendChild(nifr).siblings("iframe").setStyle("display", "none");
    }
    if (index + 2 === url.length) {
      Y.one("#n").setStyle("display", "none");
      Y.one("#h").setStyle("display", "inline");
    } else {
      Y.one("#p").setStyle("display", "inline");
    }
  };
  prev = function() {
    display = Y.all("iframe").getStyle("display");
    index = display.indexOf("inline");
    Y.all("iframe").item(index - 1).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    Y.one("#n").setStyle("display", "inline");
    if (index - 1 === 0) {
      Y.one("#p").setStyle("display", "none");
    } else {
      Y.one("#p").setStyle("display", "inline");
      Y.one("#h").setStyle("display", "none");
    }
  };
  Y.one("#p").on("click", prev);
  Y.one("#n").on("click", next);
});
 pending…
yui
 
YUI().use('node', function(Y) {
  var display, index;
  var next, prev;
  var url = ["a.html", "b.html", "c.html", "d.html", "e.html"];
  var l = Y.all("iframe").size();
  var nifr = document.createElement("iframe");
  nifr.setAttribute("src", url[l]);
  next = function() {
    display = Y.all("iframe").getStyle("display");
    index = display.indexOf("inline");
    if (index + 1 < display.length) {
      Y.all("iframe").item(index + 1).setStyle("display", "inline");
      Y.all("iframe").item(index).setStyle("display", "none");
    } else {
      Y.one("#popup").appendChild(nifr).siblings("iframe").setStyle("display", "none");
    }
    if (index + 2 === url.length) {
      Y.one("#n").setStyle("display", "none");
      Y.one("#h").setStyle("display", "inline");
    } else {
      Y.one("#p").setStyle("display", "inline");
    }
  };
  prev = function() {
    display = Y.all("iframe").getStyle("display");
    index = display.indexOf("inline");
    Y.all("iframe").item(index - 1).setStyle("display", "inline");
    Y.all("iframe").item(index).setStyle("display", "none");
    Y.one("#n").setStyle("display", "inline");
    if (index - 1 === 0) {
      Y.one("#p").setStyle("display", "none");
    } else {
      Y.one("#p").setStyle("display", "inline");
      Y.one("#h").setStyle("display", "none");
    }
  };
  Y.one("#p").on("click", prev);
  Y.one("#n").on("click", next);
});
 pending…
json
 
YUI().use('json-parse', 'node', function(Y) {
  //function
  var next, prev, data;
  var display, index;

  //jsonstring
  var jsonString = '{"iframe_data":[' + '{"id":1,"url":"a.html"},' + '{"id":2,"url":"b.html"},' + '{"id":3,"url":"c.html"},' + '{"id":4,"url":"d.html"},' + '{"id":5,"url":"e.html"}' + ']}';

  //next
  next = function() {

    display = Y.all("iframe").getStyle("display");
    index = display.indexOf("inline");
    Y.log(display.length);
    Y.log(index + 1);
    if (index + 1 < display.length) {
      Y.all("iframe").item(index + 1).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    } else {
      var l = Y.all("iframe").size();
      var link = data.iframe_data[l].url;
      var new_iframe = document.createElement("iframe");
      new_iframe.setAttribute("src", link);
      Y.one("#popup").appendChild(new_iframe).siblings("iframe").setStyle("display", "none");
    }
    if (data.iframe_data.length === index + 2) {
      Y.one("#n").setStyle("display", "none");
      Y.one("#h").setStyle("display", "inline");
    } else {
      Y.one("#p").setStyle("display", "inline");
    }
  };

  //prev
  prev = function() {
    display = Y.all("iframe").getStyle("display");
    index = display.indexOf("inline");
    Y.all("iframe").item(index - 1).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    //next_button show
    Y.one(".next_button").setStyle("display", "inline");
    if (index - 1 === 0) {
      Y.one("#p").setStyle("display", "none");
    } else {
      Y.one("#p").setStyle("display", "inline");
      Y.one("#h").setStyle("display", "none");
    }
  };

  //click event
  Y.one("#p").on("click", prev);
  Y.one("#n").on("click", next);

  // JSON.parse throws a SyntaxError when passed invalid JSON
  try {
    //var data = Y.JSON.parse(jsonString,reviver);
    data = Y.JSON.parse(jsonString);
  } catch (e) {
    alert("json Error");
  }


});
 pending…
json+
 
YUI().use('json-parse', 'node', function (Y) {
    //function
    var next, prev, data;
    var iframe_display, index_inline;

    //jsonstring
    var jsonString = '{"iframe_data":[' +
        '{"id":1,"url":"a.html"},' +
        '{"id":2,"url":"b.html"},' +
        '{"id":3,"url":"c.html"},' +
        '{"id":4,"url":"d.html"},' +
        '{"id":5,"url":"e.html"}' +
        ']}';

    //next
    next = function () {
        iframe_display = Y.all("iframe").getStyle("display");
        index_inline = iframe_display.indexOf("inline");
        Y.log(iframe_display.length);
        Y.log(index_inline + 1);
        if (index_inline + 1 < iframe_display.length) {
            Y.all("iframe").item(index_inline + 1).setStyle("display", "inline");
            Y.all("iframe").item(index_inline).setStyle("display", "none");
        } else {
            var l = Y.all("iframe").size();
            var link = data.iframe_data[l].url;
            var new_iframe = document.createElement("iframe");
            new_iframe.setAttribute("src", link);
            Y.one("#popup").appendChild(new_iframe).siblings("iframe").setStyle("display", "none");
        }
        if (data.iframe_data.length === index_inline + 2) {
            Y.one("#n").setStyle("display", "none");
            Y.one("#h").setStyle("display", "inline");
        } else {
            Y.one("#p").setStyle("display", "inline");
        }
    };

    //prev
    prev = function () {
        iframe_display = Y.all("iframe").getStyle("display");
        index_inline = iframe_display.indexOf("inline");
        Y.all("iframe").item(index_inline - 1).setStyle("display", "inline");
        Y.all("iframe").item(index_inline).setStyle("display", "none");
        //next_button show
        Y.one("#n").setStyle("display", "inline");
        if (index_inline - 1 === 0) {
            Y.one("#p").setStyle("display", "none");
        } else {
            Y.one("#p").setStyle("display", "inline");
            Y.one("#h").setStyle("display", "none");
        }
    };

    //click event
    Y.one("#p").on("click", prev);
    Y.one("#n").on("click", next);

    // JSON.parse throws a SyntaxError when passed invalid JSON
    try {
        //var data = Y.JSON.parse(jsonString,reviver);
        data = Y.JSON.parse(jsonString);
    } catch (e) {
        alert("json Error");
    }

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