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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 4 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15

Browser/OS: Safari 12 on Mac OS X 10.14.3

View result in a separate tab

Test name	Executions per second
Indexed	147214.1 Ops/sec
ForEach	133150.9 Ops/sec
ForOf	149933.1 Ops/sec

createElementTree ForEach 2 (version: 0)

Comparing performance of: Indexed vs ForEach vs ForOf

Created: 4 years ago by: Guest

Jump to the latest result

Indexed

ForEach

ForOf

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A