Benchmark: Concat vs plus sign string vs string literals

Concat

const html = '\n            <div class="tnt-dell-rewards-carousel-body-item">\n                <div class="tnt-dell-rewards-carousel-body-item-image">\n                    <img src="'.concat(image,'" alt="').concat(prodname,'">\n                </div>\n                <div class="tnt-dell-rewards-carousel-body-item-info">\n                    <p class="tnt-dell-rewards-item-name"><a href="').concat(viewItemUrl,'" title="').concat(prodname,'">').concat(prodname,'</a></p>\n                    <p class="tnt-dell-rewards-item-value">after applying <b>').concat(rewardsTotalValue,'</b> Rewards when paying in checkout</p>\n                </div>\n                <div class="tnt-dell-rewards-carousel-body-item-price">\n                    <s>').concat(display,"</s>\n                    <b>").concat(a,'</b>\n                </div>\n                <div class="tnt-dell-rewards-carousel-body-item-buttons">\n                    <a href="//www.dell.com/purchase/cart/en-ca" class="').concat(r,'" title="Go to Cart">Go to Cart</a>\n                    <a href="').concat(viewItemUrl,'" class="tnt-dell-rewards-button-secondary tnt-dell-rewards-button-configurable-').concat(isConfigurable,'" title="Customize">Customize the ').concat(description&&description.slice(0,-1),"</a>\n                </div>\n            </div>\n        ");

document.body.insertAdjacentHTML('afterbegin', html);

+ sign

const html = '\n            <div class="tnt-dell-rewards-carousel-body-item">\n                <div class="tnt-dell-rewards-carousel-body-item-image">\n                    <img src="'+ image +'" alt="' + prodname +'">\n                </div>\n                <div class="tnt-dell-rewards-carousel-body-item-info">\n                    <p class="tnt-dell-rewards-item-name"><a href="'+viewItemUrl+'" title="'+prodname+'">'+prodname+'</a></p>\n                    <p class="tnt-dell-rewards-item-value">after applying <b>'+rewardsTotalValue+'</b> Rewards when paying in checkout</p>\n                </div>\n                <div class="tnt-dell-rewards-carousel-body-item-price">\n                    <s>'+display+"</s>\n                    <b>"+a+'</b>\n                </div>\n                <div class="tnt-dell-rewards-carousel-body-item-buttons">\n                    <a href="//www.dell.com/purchase/cart/en-ca" class="'+r+'" title="Go to Cart">Go to Cart</a>\n                    <a href="'+viewItemUrl+'" class="tnt-dell-rewards-button-secondary tnt-dell-rewards-button-configurable-'+isConfigurable+'" title="Customize">Customize the '+description&&description.slice(0,-1)+'</a>\n                </div>\n            </div>\n        ';
document.body.insertAdjacentHTML('afterbegin', html);

String Literals

const html = `
    <div class="tnt-dell-rewards-carousel-body-item">
        <div class="tnt-dell-rewards-carousel-body-item-image">
            <img src="${image}" alt="${prodname}">
        </div>
        <div class="tnt-dell-rewards-carousel-body-item-info">
            <p class="tnt-dell-rewards-item-name"><a href="${viewItemUrl}" title="${prodname}">${prodname}</a></p>
            <p class="tnt-dell-rewards-item-value">after applying <b>${r}</b> Rewards when paying in checkout</p>
        </div>
        <div class="tnt-dell-rewards-carousel-body-item-price">
            <s>${display}</s>
            <b>${rewardsTotalValue}</b>
        </div>
        <div class="tnt-dell-rewards-carousel-body-item-buttons">
            <a href="//www.dell.com/purchase/cart/en-ca" class="${a}" title="Go to Cart">Go to Cart</a>
            <a href="${viewItemUrl}" class="tnt-dell-rewards-button-secondary tnt-dell-rewards-button-configurable-${isConfigurable}" title="Customize">Customize the ${description && description.slice(0, -1)}</a>
        </div>
    </div>
`;

document.body.insertAdjacentHTML('afterbegin', html);

Test name	Executions per second
✓ + sign	129,141 Ops/sec
String Literals	39,469 Ops/sec
Concat	29,267 Ops/sec

Concat vs plus sign string vs string literals (version: 1)

Comparing performance of: `Concat vs + sign vs String Literals`

Created: 10 months ago by: Guest

Go to the latest result

Concat

+ sign

String Literals

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Concat vs plus sign string vs string literals (version: 1)

Comparing performance of: Concat vs + sign vs String Literals

Created: 10 months ago by: Guest

Go to the latest result

Concat

+ sign

String Literals

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `Concat vs + sign vs String Literals`