Run results for: createElementTree ForEach 2

Run details:

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: Safari 12

Operating system: Mac OS X 10.14.3

Device Platform: Desktop

Date tested: 4 years ago

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

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);

Run results for: createElementTree ForEach 2

Indexed

ForEach

ForOf