Run results for: Template String vs Template Function 4

Run details:

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

Browser: Chrome 104

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
Template String	59458.6 Ops/sec
Template Function	47509.4 Ops/sec
Template String Map	61172.3 Ops/sec
Template String Map Inside	52856.9 Ops/sec

Script Preparation code:

var placeHolderElem = document.createElement('div');
placeHolderElem.id = "PlaceHolder";
document.body.append(placeHolderElem);
var placeHolder = document.querySelector('#PlaceHolder');
var isEnabled = true;
var itemList = [1, 2, 3, 4];

Tests:

Template String
const subTemplate = (item) => `<li>${item}</li>`; const template = `<div class="container"> ${isEnabled ? 'Enabled' : 'Disabled'} <ul>${(()=> { var output = ''; itemList.forEach((item) =>{ output += subTemplate(item) }); return output})()}</ul> </div>`; placeHolder.innerHTML = template;
Template Function
const templateFunction = function (obj) { obj || (obj = {}); var __t, __p = '', __j = Array.prototype.join; function print() { __p += __j.call(arguments, '') } with (obj) { __p += '<div class="container">\r\n ' + ((__t = (isEnabled ? 'Enabled' : 'Disabled')) == null ? '' : __t) + '\r\n <ul>\r\n '; itemList.forEach((item) => { ; __p += '\r\n <li>' + ((__t = (item)) == null ? '' : __t) + '</li>\r\n '; }); __p += '\r\n </ul>\r\n</div>'; } return __p; } placeHolder.innerHTML = templateFunction({ isEnabled });
Template String Map
const subTemplate = (item) => `<li>${item}</li>`; const template = `<div class="container"> ${isEnabled ? 'Enabled' : 'Disabled'} <ul>${itemList.map(subTemplate).join('')}</ul> </div>`; placeHolder.innerHTML = template;
Template String Map Inside
const template = `<div class="container"> ${isEnabled ? 'Enabled' : 'Disabled'} <ul>${itemList.map((item)=>`<li>${item}</li>`).join('')}</ul> </div>`; placeHolder.innerHTML = template;

Run results for: Template String vs Template Function 4

Template String

Template Function

Template String Map

Template String Map Inside