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=608020" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Linux; Android 8.1.0; ASUS_X00HD) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.7103.125 Mobile Safari/537.36
Browser:
Chrome Mobile 136
Operating system:
Android 8.1.0
Device Platform:
Mobile
Date tested:
11 months ago
Test name
Executions per second
Anonymous function
5.0 Ops/sec
Named function as parameter
1.8 Ops/sec
External function
2.0 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); }