Run results for: className vs. setAttribute (jsx)

Run details:

User agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36

Browser: Chrome 79

Operating system: Windows 8

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
className	615.4 Ops/sec
setAttribute	1121.6 Ops/sec

HTML Preparation code:

<div id="foo"></div>

Tests:

className
var __assign = Object.assign; function __rest(s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === 'function') for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; } var keys = Object.keys; function isBoolean(val) { return typeof val === 'boolean'; } function isElement(val) { return val && typeof val.nodeType === 'number'; } function isString(val) { return typeof val === 'string'; } function isNumber(val) { return typeof val === 'number'; } function isObject(val) { return typeof val === 'object' ? val !== null : isFunction(val); } function isFunction(val) { return typeof val === 'function'; } function isArrayLike(obj) { return ( isObject(obj) && typeof obj.length === 'number' && typeof obj.nodeType !== 'number' ); } function createRef() { return Object.seal({ current: null, }); } function isRef(maybeRef) { return isObject(maybeRef) && 'current' in maybeRef; } var SVGNamespace = 'http://www.w3.org/2000/svg'; function preventDefault(event) { event.preventDefault(); return event; } function stopPropagation(event) { event.stopPropagation(); return event; } function isVisibleChild(value) { return !isBoolean(value) && value != null; } function className(value) { if (Array.isArray(value)) { return value .map(className) .filter(Boolean) .join(' '); } else if (isObject(value)) { return keys(value) .filter(function (k) { return value[k]; }) .join(' '); } else if (isVisibleChild(value)) { return '' + value; } return ''; } function createFactory(tag) { return createElement.bind(null, tag); } function Fragment(attr) { var fragment = document.createDocumentFragment(); appendChildren(attr.children, fragment); return fragment; } function createElement(tag, attr) { var children = []; for (var _i = 2; _i < arguments.length; _i++) { children[_i - 2] = arguments[_i]; } var _a; attr = attr || {}; if (attr.children != null && !children.length) { (_a = attr), ((children = _a.children), _a), (attr = __rest(_a, ['children'])); } var node; if (isString(tag)) { node = attr.namespaceURI ? document.createElementNS(attr.namespaceURI, tag) : document.createElement(tag); attributes(attr, node); appendChild(children, node); } else if (isFunction(tag)) { if (isObject(tag.defaultProps)) { attr = __assign(__assign({}, tag.defaultProps), attr); } node = tag( __assign(__assign({}, attr), { children: children, }) ); } if (isRef(attr.ref)) { attr.ref.current = node; } else if (isFunction(attr.ref)) { attr.ref(node); } return node; } function appendChild(child, node) { if (isArrayLike(child)) { appendChildren(child, node); } else if (isString(child) || isNumber(child)) { node.appendChild(document.createTextNode(child)); } else if (child === null) { node.appendChild(document.createComment('')); } else if (isElement(child)) { node.appendChild(child); } } function appendChildren(children, node) { for (var _i = 0, children_1 = children; _i < children_1.length; _i++) { var child = children_1[_i]; appendChild(child, node); } return node; } function attribute(key, value, node) { switch (key) { case 'htmlFor': node.setAttribute('for', value); return; case 'dataset': for (var _i = 0, _a = keys(value || {}); _i < _a.length; _i++) { var dataKey = _a[_i]; var dataValue = value[dataKey]; if (dataValue != null) { node.dataset[dataKey] = dataValue; } } return; case 'innerHTML': case 'innerText': case 'textContent': node[key] = value; return; case 'spellCheck': node.spellcheck = value; return; case 'class': case 'className': node.setAttribute('class', className(value)); return; case 'ref': case 'namespaceURI': return; case 'style': if (isObject(value)) { Object.assign(node.style, value); return; } } if (isFunction(value)) { if (key[0] === 'o' && key[1] === 'n') { var name = key.slice(2).toLowerCase(); node.addEventListener(name, value); } } else if (value === true) { node.setAttribute(key, ''); } else if (value !== false && value != null) { node.setAttribute(key, value); } } function attributes(attr, node) { for (var _i = 0, _a = keys(attr); _i < _a.length; _i++) { var key = _a[_i]; attribute(key, attr[key], node); } return node; } // ---------------------- var i = 1000; while (i--) { createElement('div') }
setAttribute
var __assign = Object.assign; function __rest(s, e) { var t = {}; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p]; if (s != null && typeof Object.getOwnPropertySymbols === 'function') for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]]; } return t; } var keys = Object.keys; function isBoolean(val) { return typeof val === 'boolean'; } function isElement(val) { return val && typeof val.nodeType === 'number'; } function isString(val) { return typeof val === 'string'; } function isNumber(val) { return typeof val === 'number'; } function isObject(val) { return typeof val === 'object' ? val !== null : isFunction(val); } function isFunction(val) { return typeof val === 'function'; } function isArrayLike(obj) { return ( isObject(obj) && typeof obj.length === 'number' && typeof obj.nodeType !== 'number' ); } function createRef() { return Object.seal({ current: null, }); } function isRef(maybeRef) { return isObject(maybeRef) && 'current' in maybeRef; } var SVGNamespace = 'http://www.w3.org/2000/svg'; function preventDefault(event) { event.preventDefault(); return event; } function stopPropagation(event) { event.stopPropagation(); return event; } function isVisibleChild(value) { return !isBoolean(value) && value != null; } function className(value) { if (Array.isArray(value)) { return value .map(className) .filter(Boolean) .join(' '); } else if (isObject(value)) { return keys(value) .filter(function (k) { return value[k]; }) .join(' '); } else if (isVisibleChild(value)) { return '' + value; } return ''; } function createFactory(tag) { return createElement.bind(null, tag); } function Fragment(attr) { var fragment = document.createDocumentFragment(); appendChildren(attr.children, fragment); return fragment; } var div = document.createElement('div'); function createElement(tag, attr) { var children = []; for (var _i = 2; _i < arguments.length; _i++) { children[_i - 2] = arguments[_i]; } var _a; attr = attr || {}; if (attr.children != null && !children.length) { (_a = attr), ((children = _a.children), _a), (attr = __rest(_a, ['children'])); } var node; if (tag === 'div') { node = div.cloneNode(); } else if (isString(tag)) { node = attr.namespaceURI ? document.createElementNS(attr.namespaceURI, tag) : document.createElement(tag); attributes(attr, node); appendChild(children, node); } else if (isFunction(tag)) { if (isObject(tag.defaultProps)) { attr = __assign(__assign({}, tag.defaultProps), attr); } node = tag( __assign(__assign({}, attr), { children: children, }) ); } if (isRef(attr.ref)) { attr.ref.current = node; } else if (isFunction(attr.ref)) { attr.ref(node); } return node; } function appendChild(child, node) { if (isArrayLike(child)) { appendChildren(child, node); } else if (isString(child) || isNumber(child)) { node.appendChild(document.createTextNode(child)); } else if (child === null) { node.appendChild(document.createComment('')); } else if (isElement(child)) { node.appendChild(child); } } function appendChildren(children, node) { for (var _i = 0, children_1 = children; _i < children_1.length; _i++) { var child = children_1[_i]; appendChild(child, node); } return node; } function attribute(key, value, node) { switch (key) { case 'htmlFor': node.setAttribute('for', value); return; case 'dataset': for (var _i = 0, _a = keys(value || {}); _i < _a.length; _i++) { var dataKey = _a[_i]; var dataValue = value[dataKey]; if (dataValue != null) { node.dataset[dataKey] = dataValue; } } return; case 'innerHTML': case 'innerText': case 'textContent': node[key] = value; return; case 'spellCheck': node.spellcheck = value; return; case 'class': case 'className': node.setAttribute('class', className(value)); return; case 'ref': case 'namespaceURI': return; case 'style': if (isObject(value)) { Object.assign(node.style, value); return; } } if (isFunction(value)) { if (key[0] === 'o' && key[1] === 'n') { var name = key.slice(2).toLowerCase(); node.addEventListener(name, value); } } else if (value === true) { node.setAttribute(key, ''); } else if (value !== false && value != null) { node.setAttribute(key, value); } } function attributes(attr, node) { for (var _i = 0, _a = keys(attr); _i < _a.length; _i++) { var key = _a[_i]; attribute(key, attr[key], node); } return node; } // ---------------------- var i = 1000; while (i--) { createElement('div'); }