Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
Event listener anonymous function vs named inline function vs external function
This test compares performance of addEventListener(), when it's passed anonymous function, named inline function and function declared beforehand.
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=505577" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36
Browser:
Chrome 121
Operating system:
Windows
Device Platform:
Desktop
Date tested:
2 years ago
Test name
Executions per second
Anonymous function
23.7 Ops/sec
Named function as parameter
10.0 Ops/sec
External function
8.3 Ops/sec
HTML Preparation code:
<div id="element"></div>
Script Preparation code:
var element = document.getElementById('element'); var iterations = 100; var dummyString = 'Hello';
Tests:
Anonymous function
for (var i = 0; i < iterations; i++) { element.addEventListener('click', function() { element.textContent = dummyString; }); }
Named function as parameter
for (var i = 0; i < iterations; i++) { element.addEventListener('click', function setText() { element.textContent = dummyString; }); }
External function
function setText() { 'use strict'; element.textContent = dummyString; } for (var i = 0; i < iterations; i++) { element.addEventListener('click', setText); }