perf: Add addEventListener benchmark

mhevery · mhevery · commit 3a017d3fb10a · 2017-06-12T02:48:29.000+02:00
diff --git a/example/benchmarks/addEventListener.html b/example/benchmarks/addEventListener.html
@@ -0,0 +1,65 @@
+<!doctype html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Zone.js addEventListenerBenchmark</title>
+  <link rel="stylesheet" href="css/style.css">
+  <script src="../../dist/zone.js"></script>
+</head>
+<body>
+
+  <h1>addEventListener Benchmark</h1>
+
+  <h2>No Zone</h2>
+  <button id="b1">Add/Remove same callback</button>
+  <button id="b2">Add/Remove different callback</button>
+
+  <h2>With Zone</h2>
+  <button id="b3">Add/Remove same callback</button>
+  <button id="b4">Add/Remove different callback</button>
+
+  <div id="rootDiv"></div>
+
+  <script>
+    b1.addEventListener('click', function () { addRemoveCallback(true, false); });
+    b2.addEventListener('click', function () { addRemoveCallback(false, false); });
+    b3.addEventListener('click', function () { addRemoveCallback(true, true); });
+    b4.addEventListener('click', function () { addRemoveCallback(false, true); });
+    var divs = [];
+    var callbacks = [];
+    var size = 100000;
+    for(var i = 0; i < size; i++) {
+        var div = document.createElement("div");
+        var callback = (function(i) { return function() { console.log(i); }; })(i);
+        rootDiv.appendChild(div);
+        divs[i] = div;
+        callbacks[i] = callback;
+    }
+
+    function addRemoveCallback(reuse, useZone) {
+      var start = performance.now();
+      var callback = callbacks[0];
+      for(var i = 0; i < size; i++) {
+        var div = divs[i];
+        if (!reuse) callback = callbacks[i];
+        if (useZone)
+          div.addEventListener('click', callback);
+        else
+          div.__zone_symbol__addEventListener('click', callback);
+      }
+
+      for(var i = 0; i < size; i++) {
+        var div = divs[i];
+        if (!reuse) callback = callbacks[i];
+        if (useZone)
+          div.removeEventListener('click', callback);
+        else
+          div.__zone_symbol__removeEventListener('click', callback);
+      }
+      var end = performance.now();
+      console.log(useZone ? 'use zone': 'native', reuse ? 'reuse' : 'new', end - start, 'ms');
+    }
+
+  </script>
+</body>
+</html>
