Performance of ES6 Template Literals as compared to String Concatenation (+) Operator

javascript
Published on November 30, 2016

The Old Way of Writing Multi-line Strings

Before ES6, writing multi-line strings in Javascript was done through the string concatenation operator +

var html = '<div class="post">' +
    '<div class="post-title">' + post_title + '</div>' +
    '<div class="post-description">' + post_description + '</div>' +
    '</div>';

$("#element").html(html);

ES6 Way of Writing Multi-line Strings

ES6 offers a new way to write multi-line strings through template literals. The multi-line string is enclosed between a pair of back-ticks `. Variables are substituted in the string using the ${ } syntax.

var html = `<div class="post">
    <div class="post-title"> ${post_title} </div>
    <div class="post-description"> ${post_decription} </div>
    </div>`;

$("#element").html(html);

Template Literals are one of the major offerings of ES6. To some extent, the back-tick operator improves the writability of multi-line strings in code.

Comparison of Performance between the ` and + operator

Initially I assumed that the performance of template literals must be faster than string concatenation through the + operator. My assumption was based on the belief that because the browser has created template literals for this very specific purpose, it would perform internal optimizations as compared to the string concatenation operator.

I decided to test my theory. Now this comparison is almost useless on a small multi-line string — both methods would take the time time to process.

So I took a 10000 line multi-line string, each line having 100 characters. The total size of the string would be about 100kb on disk. The string was assigned to a variable and it was inserted into an HTML element. Time taken to render was calculated using performance.now function.

This is the code that measures time taken to render using template literals :

// This variable is substituted in the main string 
var string_form = 'sample string';

var str1 = `abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()_abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*() ${string_form} 
abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()_abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*() ${string_form} 
...... repeated for 10000 times
abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()_abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*() ${string_form}`;

var t0, t1;

t0 = performance.now();
document.getElementById("container").innerHTML = str1;
t1 = performance.now();
console.log("Template Literal (`) took " + (t1 - t0) + " milliseconds");

And this is the code that measures time taken to render using string concatenation :

var string_form = 'sample string';

var str2 = 'abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()_abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()' + string_form + 
'abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()_abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()' + string_form + 
...... repeated for 10000 times
'abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()_abcdefghijklmnopqrstuvwxyz1234567890~!@#$%^&*()' + string_form;

var t0, t1;

t0 = performance.now();
document.getElementById("container").innerHTML = str2;
t1 = performance.now();
console.log("String Concatenation (+) took " + (t1 - t0) + " milliseconds");

To my surprise there was no performance gain as such. Time taken by both methods differed only by a mere fraction of a millisecond.

In Firefox 50 the back-tick operator was faster, it took around 1ms. Concatenation using + took around 1.1ms. Back-tick was always faster.

In Chrome 52 string concatenation using + was faster on average, it took around 1.5ms. Back-tick operator took around 1.7ms. Although there were a few times where back-tick was faster.

Although it was a very simple test, yet I think there will be no performance gain in using template literals in normal web applications.

String concatenation is an aged-old thing. Probably there is no performance gain in using template literals because the algorithm to concatenate strings is already so optimized that there is no scope for further optimizations ?

In this Tutorial