Run results for: Template String vs Template Function 3

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: one year ago

Test name	Executions per second
Template String	67544.6 Ops/sec
Template Function	50230.8 Ops/sec
Template String Map	72289.8 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;

Run results for: Template String vs Template Function 3

Template String

Template Function

Template String Map