Skip to content

Instantly share code, notes, and snippets.

@valdrinkoshi

valdrinkoshi/shadydom-listeners.html

Last active November 3, 2016 00:29
Show Gist options
  • Save valdrinkoshi/32d33fd66b7cbcd48a9f70f30fb572ce to your computer and use it in GitHub Desktop.
Save valdrinkoshi/32d33fd66b7cbcd48a9f70f30fb572ce to your computer and use it in GitHub Desktop.
Download ZIP
Test performance of shadydom add/removeEventListener patch
Raw
shadydom-listeners.html
<!doctype html>
<html>
<head>
<script>
ShadyDOM = {
force: true
};
</script>
<script src="shadydom.min.js"></script>
</head>
<body>
<script>
setTimeout(function() {
startTest(document.body, 4);
}, 100);
function startTest(el, count) {
let i = 0;
const callbacks = generateCallbacks(logEventType, 1000, 2);
const interval = setInterval(function() {
addEventListeners(el, callbacks);
setTimeout(function() {
removeEventListeners(el, callbacks);
}, 50);
if (++i === count) {
clearInterval(interval);
}
}, 200);
}
function addEventListeners(el, callbacks) {
console.time('addEventListeners');
for (let i = 0; i < callbacks.length; i++) {
el.addEventListener('test-event-' + i, callbacks[i]);
}
console.timeEnd('addEventListeners');
}
function removeEventListeners(el, callbacks) {
console.time('removeEventListener');
for (let i = 0; i < callbacks.length; i++) {
el.removeEventListener('test-event-' + i, callbacks[i]);
}
console.timeEnd('removeEventListener');
}
function generateCallbacks(originalCb, length, newCallbackEach) {
const callbacks = [];
let cb;
for (let i = 0; i < length; i++) {
if (i % newCallbackEach === 0) {
cb = originalCb.bind();
}
callbacks.push(cb);
}
return callbacks;
}
function logEventType(event) {
console.log(event.type);
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment