tedtestDom

JavaScript performance comparison

Revision 8 of this test case created by Ted

Info

Test Dom

Preparation code

<div id="popup">
  <button class="prev_button">
    prev
  </button>
  <button class="next_button">
    next
  </button>
  <button class="finish_button">
    Home
  </button>
  <iframe src="">
  </iframe>
</div>
<script src="http://yui.yahooapis.com/3.8.1/build/yui/yui-min.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
DOM
YUI().use('node', function(Y) {
  var display, index;
  var next, prev;
  var id = ["1", "2", "3"];
  var l = Y.all("iframe").size();
  var nifr = document.createElement("iframe");
  nifr.setAttribute("id", id[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 === id.length) {
      Y.one(".next_button").setStyle("display", "none");
      Y.one(".finish_button").setStyle("display", "inline");
    } else {
      Y.one(".prev_button").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(".next_button").setStyle("display", "inline");
    if (index - 1 === 0) {
      Y.one(".prev_button").setStyle("display", "none");
    } else {
      Y.one(".prev_button").setStyle("display", "inline");
      Y.one(".finish_button").setStyle("display", "none");
    }
  };
  next();
  next();
  prev();
});
pending…
json
YUI().use('json', 'node', function(Y) {
  //function
  var next, prev, data, offset, hasAllRendered, jsonString;
  //jsonstring
  offset = 1;
  hasAllRendered = false;
  jsonString = [{
    id: "0",
    url: "a.html",
    hasRendered: true
  }, {
    id: "1",
    url: "b.html",
    hasRendered: false
  }, {
    id: "2",
    url: "c.html",
    hasRendered: false
  }, {
    id: "3",
    url: "d.html",
    hasRendered: false
  }];

  //next
  next = function() {
    var id, new_iframe;
    id= jsonString[offset].id;
    Y.log(jsonString[offset - 1].hasRendered);
    Y.log("offset:" + offset);
    Y.log(id);
    if (jsonString[offset].hasRendered === true) {
      //next
      Y.all("iframe").item(offset).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    } else {
      //create
      new_iframe = document.createElement("iframe");
      new_iframe.setAttribute("id", id);
      Y.one("#popup").appendChild(new_iframe).siblings("iframe").setStyle("display", "none");
    }
    //prev_button hide and show home
    if (offset === jsonString.length - 1) {
      Y.one(".next_button").setStyle("display", "none");
      Y.one(".finish_button").setStyle("display", "inline");
    } else {
      Y.one(".prev_button").setStyle("display", "inline");
    }
    jsonString[offset].hasRendered = true;
    //counter
    offset += 1;
    Y.log("offset_next:" + offset);
  };

  //prev
  prev = function() {
    Y.log(jsonString[offset - 1].hasRendered);
    Y.log("offset:" + offset);
    //prev
    Y.all("iframe").item(offset - 2).setStyle("display", "inline").siblings("iframe").setStyle("display", "none");
    //counter
    offset -= 1;
    Y.log("offset_prev:" + offset);
    //next_button show
    Y.one(".next_button").setStyle("display", "inline");
    if (offset === 1) {
      Y.one(".prev_button").setStyle("display", "none");
    } else {
      Y.one(".prev_button").setStyle("display", "inline");
      Y.one(".finish_button").setStyle("display", "none");
    }
  };

  next();
  next();
  prev();
});
pending…
json(class replace style)
YUI().use('json-stringify', 'node', 'event', function (Y) {
    //function
    var next, prev, show, offset, hasAllRendered, jsonString, link, new_iframe;
    //jsonstring
    offset = 0;
    hasAllRendered = false;
    jsonString = [
        {
            id: "0",
            url: "a.html",
            hasRendered: false
        },
        {
            id: "1",
            url: "b.html",
            hasRendered: false
        },
        {
            id: "2",
            url: "c.html",
            hasRendered: false
        },
        {
            id: "3",
            url: "d.html",
            hasRendered: false
        }
    ];

    show = function () {
        link = jsonString[offset].url;
        Y.log(link);
        jsonString[offset].hasRendered = true;
        new_iframe = document.createElement("iframe");
        new_iframe.setAttribute("src", link);
        Y.one("#popup").appendChild(new_iframe).addClass("show");
    };
    show();
    //next
    next = function () {
    //counter
        offset += 1;
        link = jsonString[offset].url;
        Y.log(jsonString[offset].hasRendered);
        Y.log("offset:" + offset);
        Y.log(link);
        if (jsonString[offset].hasRendered === true) {
            //next
            Y.all("iframe").item(offset).addClass("show");
            Y.all("iframe").item(offset - 1).removeClass("show");
        } else {
            //create
            new_iframe = document.createElement("iframe");
            new_iframe.setAttribute("src", link);
            Y.one("#popup").appendChild(new_iframe).addClass("show");
            Y.all("iframe").item(offset - 1).removeClass("show");
        }
        //prev_button hide and show home
        if (offset  === jsonString.length - 1) {
            Y.one(".next_button").setStyle("display", "none");
            Y.one(".finish_button").setStyle("display", "inline");
        } else {
            Y.one(".prev_button").setStyle("display", "inline");
        }
        jsonString[offset].hasRendered = true;
        //var counter = offset++;
    };

    //prev
    prev = function () {
        Y.log("offset:" + offset);
        Y.log(jsonString[offset - 1].hasRendered);
        //prev
        Y.all("iframe").item(offset - 1).addClass("show");
        Y.all("iframe").item(offset).removeClass("show");
        //counter
        offset -= 1;
        Y.log("offset-:" + offset);
        //next_button show
        Y.one(".next_button").setStyle("display", "inline");
        if (offset === 0) {
            Y.one(".prev_button").setStyle("display", "none");
        } else {
            Y.one(".prev_button").setStyle("display", "inline");
            Y.one(".finish_button").setStyle("display", "none");
        }
    };

    //click event
next();
prev();
    //log
    Y.log("jsonString_length:" + jsonString.length);
});
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