Benchmark: createElementTree ForEach 2

Script Preparation code:

var menu =
[
	{
		"className": "item",
		"content": "Open"
	},
	{
		"className": "item",
		"content": "Save"
	},
	{
		"className": "item",
		"content": "Close"
	},
	{
		"className": "item",
		"content": "Exit"
	}
];

Document.prototype.createElementTree1 = function(template, defaultTagName)
{
	var result;
	var index;
	var limit;
	var attribute;

	if(template instanceof Object)
		if("length" in template)
		{
			result = this.createDocumentFragment();
			limit = template.length;
			for(index = 0; index < limit; index++)
				result.appendChild(this.createElementTree1(template[index], defaultTagName));
		}
		else
		{
			result = this.createElement(template.tagName || defaultTagName || "div");
			for(attribute in template)
				switch(attribute)
				{
					case "tagName":
					case "content":
						break;
					default:
						result[attribute] = template[attribute];
						break;
				}
			if(template.content)
				result.appendChild(this.createElementTree1(template.content, defaultTagName));
		}
	else
		result = this.createTextNode(template);

	return(result);
};

Document.prototype.createElementTree2 = function(template, defaultTagName)
{
	var result;
	var attribute;

	if(template instanceof Object)
		if("length" in template)
		{
			result = this.createDocumentFragment();
			template.forEach(item => result.appendChild(this.createElementTree2(item, defaultTagName)));
		}
		else
		{
			result = this.createElement(template.tagName || defaultTagName || "div");
			for(attribute in template)
				switch(attribute)
				{
					case "tagName":
					case "content":
						break;
					default:
						result[attribute] = template[attribute];
						break;
				}
			if(template.content)
				result.appendChild(this.createElementTree2(template.content, defaultTagName));
		}
	else
		result = this.createTextNode(template);

	return(result);
};

"use strict";

Document.prototype.createElementTree3 = function(template, defaultTagName)
{
	var result;
	var attribute;
	var item;

	if(template instanceof Object)
		if("length" in template)
		{
			result = this.createDocumentFragment();
			for(item of template)
				result.appendChild(this.createElementTree3(item, defaultTagName));
		}
		else
		{
			result = this.createElement(template.tagName || defaultTagName || "div");
			for(attribute in template)
				switch(attribute)
				{
					case "tagName":
					case "content":
						break;
					default:
						result[attribute] = template[attribute];
						break;
				}
			if(template.content)
				result.appendChild(this.createElementTree3(template.content, defaultTagName));
		}
	else
		result = this.createTextNode(template);

	return(result);
};

Tests:

Indexed
document.createElementTree1(menu);
ForEach
document.createElementTree2(menu);
ForOf
document.createElementTree3(menu);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Indexed
ForEach
ForOf

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what is tested, compared, and other considerations.

**Benchmark Definition**

The benchmark definition provides two JavaScript functions: `createElementTree1`, `createElementTree2`, and `createElementTree3`. These functions are designed to create a tree of HTML elements from a template object.

**Comparison of Options**

The three functions differ in how they handle the template object:

*   `createElementTree1` uses a traditional for loop (`for (index = 0; index < limit; index++)`) to iterate over the template array.
*   `createElementTree2` uses the `forEach` method on the template array, which is a more modern and concise way of iterating over arrays.
*   `createElementTree3` also uses the `forEach` method, but it's explicitly declared as an iterator using the `for...of` loop syntax.

**Pros and Cons**

Here are some pros and cons of each approach:

*   `createElementTree1`:
    *   Pros: Easy to understand and implement for those familiar with traditional loops.
    *   Cons: May be slower than the other two options due to the overhead of a traditional loop.
*   `createElementTree2` (`forEach` method):
    *   Pros: More concise and modern way of iterating over arrays, can be faster due to optimized JavaScript engine implementations.
    *   Cons: May require more time for developers to learn and understand this syntax.
*   `createElementTree3` (`for...of` loop):
    *   Pros: Even more concise than `forEach`, with the added benefit of being explicitly declared as an iterator, which can make it easier for other JavaScript engines to optimize.
    *   Cons: Requires support for the `for...of` loop syntax, which may not be available in older browsers or environments.

**Other Considerations**

The benchmark also includes three test cases:

*   `Indexed`: Uses `createElementTree1` with an indexed template array.
*   `ForEach`: Uses `createElementTree2` with a template array that uses the `forEach` method.
*   `ForOf`: Uses `createElementTree3` with a template array that uses the `for...of` loop.

These test cases are designed to compare the performance of each function in different scenarios. The benchmark results show which function is fastest for each test case.

**Benchmark Results**

The latest benchmark results provide execution counts per second for each function across multiple browsers and devices:

*   `ForOf`: 149,933 executions/second
*   `Indexed`: 147,214 executions/second
*   `ForEach`: 133,150 executions/second

These results suggest that `createElementTree3` (`for...of` loop) is the fastest option across all test cases and browsers. However, it's essential to note that performance differences may vary depending on specific use cases, environments, and requirements.

In summary, this benchmark provides a comprehensive comparison of three different approaches for creating HTML element trees from template objects. The results highlight the benefits of using modern JavaScript features like `forEach` and `for...of` loops, but also emphasize the importance of considering performance characteristics and compatibility when choosing an implementation.

Related benchmarks:

createElementTree ForEach 2 (version: 0)

Comparing performance of: Indexed vs ForEach vs ForOf

Created: 6 years ago by: Guest

Jump to the latest result

Indexed

ForEach

ForOf

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):