YUI LI node manipulation

Benchmark created by Marcel Duran on

Description

The goal is to see which method runs faster when manipulating several LI nodes within an UL node, specially cleaning UL and adding new nodes vs reusing existing nodes.

Preparation HTML

<script src="http://yui.yahooapis.com/combo?3.4.1/build/yui/yui-min.js&3.4.1/build/oop/oop-min.js&3.4.1/build/event-custom-base/event-custom-base-min.js&3.4.1/build/dom-core/dom-core-min.js&3.4.1/build/dom-base/dom-base-min.js&3.4.1/build/selector-native/selector-native-min.js&3.4.1/build/selector/selector-min.js&3.4.1/build/node-core/node-core-min.js&3.4.1/build/node-base/node-base-min.js&3.4.1/build/event-base/event-base-min.js&3.4.1/build/event-delegate/event-delegate-min.js&3.4.1/build/node-event-delegate/node-event-delegate-min.js&3.4.1/build/pluginhost-base/pluginhost-base-min.js&3.4.1/build/pluginhost-config/pluginhost-config-min.js&3.4.1/build/node-pluginhost/node-pluginhost-min.js&3.4.1/build/dom-style/dom-style-min.js&3.4.1/build/dom-screen/dom-screen-min.js&3.4.1/build/node-screen/node-screen-min.js&3.4.1/build/node-style/node-style-min.js&3.4.1/build/event-custom-complex/event-custom-complex-min.js&3.4.1/build/intl/intl-min.js"></script>
<ul id="foo">
<li>bar</li>
<li>baz</li>
</ul>
<script>
  var aux,
      Y = YUI().use('node'),
      foo = Y.one('#foo'),
      bar = Y.Node.create('<li>bar</li>'),
      baz = Y.Node.create('<li>baz</li>'),
      node1 = foo.one('li'),
      node2 = foo.one('> li:last-of-type');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
2 append string
foo.all('li').remove(true);
foo.append('<li>bar</li>');
foo.append('<li>baz</li>');
ready
1 append string
foo.all('li').remove(true);
foo.append('<li>bar</li><li>baz</li>');
ready
2 append node create
foo.all('li').remove(true);
foo.append(Y.Node.create('<li>bar</li>'));
foo.append(Y.Node.create('<li>baz</li>'));
ready
1 append node create
foo.all('li').remove(true);
foo.append(Y.Node.create('<li>bar</li><li>baz</li>'));
ready
2 append clone node
foo.all('li').remove(true);
foo.append(bar.cloneNode(true));
foo.append(baz.cloneNode(true));
ready
set content string
foo.setContent('<li>bar</li><li>baz</li>');
ready
insert before selectors css3
foo.insertBefore(foo.one('> li:last-of-type'), foo.one('li'));
ready
insert before selectors
foo.insertBefore(foo.get('children').slice(-1).item(0), foo.one('li'));
ready
insert before node pointers
aux = node1;
node1 = node2;
node2 = aux;
foo.insertBefore(node1, node2);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Marcel Duran on