Delegation and data attributes vs closure in event handler performance

Question

What is more performant way to assign events?
Not taking code quality into account since it is sort of opinion-based thing.

Delegated binding + data attributes

var o = [{ key: "1", value: "one" }, { key: "2", value: "two" }, { key: "3", value: "three" }];
var $container = $("#container");

$.each(o, function() {
  $("<button/>").text(this.key).data("value", this.value).appendTo($container);
});

$(document).on("click", "button", function() {
  console.log($(this).data("value"));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

Single direct bindings + closured value

var o = [{ key: "1", value: "one" }, { key: "2", value: "two" }, { key: "3", value: "three" }];
var $container = $("#container");

$.each(o, function() {
  var x = this;

  $("<button/>")
    .text(x.key)
    .click(function() {
      console.log(x.value);
    })
    .appendTo($container);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
</div>

If we use the first approach, then we win some performance because of the delegated event handler, but lose some because we are creating a jQuery object and reading data attributes.

Will the second approach take up more memory?

score 1 · Accepted Answer · edited May 23 '17 at 11:54

Which is more performant?

I created this test on jsperf.com. I tested three different browsers and in each case the delegate approach proved to allow more operations per second:

--------------------------------------------
| Approach     | Chrome | FF     | MS Edge |
--------------------------------------------
| Delegate     | 1650   | 1612   | 611     |
| non-Bindings | 1623   |  558   | 320     |
--------------------------------------------

Thus the delegate approach is more performant.

Will the second approach take more memory?

After reading some of the answers to this question, I reached the latest version of the Google Chrome guide Fix Memory Problems. On that page there is a section which describes how to monitor memory specific to javascript within Chrome tabs. I saved each of the code snippets as a separate HTML page (i.e. buttonClickDelegate.html and buttonClicks.html, respectively) and opened both in a separate tab. As is observable in the screenshot below, the delegate approach used less memory.

However I compared with Firefox's memory usage, following the techniques in this guide. After opening the single page with the delegate approach, the memory started at 1.17 MB and went up to 1.59 MB (after clicking each button and then taking a final snapshot, with Record callstacks enabled). With the non-delegate approach, the memory started at 1.07 MB and went up to 1.24 MB (after clicking each button and then taking a final snapshot, with Record callstacks enabled).

So it seems firefox is using more memory in the delegate approach, unless that is just the entire application memory and not specific to the JavaScript code.

Delegation and data attributes vs closure in event handler performance

Delegated binding + data attributes

Single direct bindings + closured value

1 Answers1