filter/foreach vs for..of DOM template version

Benchmark created on May 27, 2023

Setup

	const
		ul = document.createElement("ul"),
		userTemplate = (user) => {
			ul.append(
				document.createElement("li").append(
					Object.assign(
						document.createElement("a"),
						{
							href : user.email,
							textContent : user.name
						}
					)
				)
			)
		};
	let
		users = [
			{
				name : "John",
				contact : true,
				email : "dummy@blackhole.com"
			},{
				name : "Jimbo",
				contact : true,
				email : "dummy@blackhole.com"
			},{
				name : "Jenna",
				contact : true,
				email : "dummy@blackhole.com"
			},{
				name : "Jason",
				contact : false,
				email : "dummy@blackhole.com"
			},{
				name : "Joker",
				contact : true,
				email : "dummy@blackhole.com"
			},{
				name : "Jakamoon",
				contact : false,
				email : "dummy@blackhole.com"
			},{
				name : "Jacob",
				contact : true,
				email : "dummy@blackhole.com"
			},{
				name : "Jospeh",
				contact : false,
				email : "dummy@blackhole.com"
			},{
				name : "Josepus",
				contact : true,
				email : "dummy@blackhole.com"
			},{
				name : "Blaine",
				contact : false,
				email : "dummy@blackhole.com"
			}
		];
		
	for (let i = 0; i < 8; i++) {
		users = users.concat(users);
	}

Teardown

ul.textContent = "";

Test runner

users.filter(
	(user) => user.contact
).forEach(
	userTemplate
);

for (user of users)
	if (user.contact)
		userTemplate(user);

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on May 27, 2023