Menu
Does HTML code generation run measurably faster in modern browsers when using string concatenation or template literals in ES6?
For example:
String concatenation
"<body>"+ "<article>"+ "<time datetime='" + date.toISOString() +"'>"+ date +"</time>"+ "</article>"+ "</body>" Template literal
`<body> <article> <time datetime='${ date.toISOString() }'>${ date }</time> </article> </body>` 
591
Using the template literal for the HTML is definitely more readable by reducing the annoyance. Your string can span multiple lines. You don't have to escape quotation characters. You don't have to use the plus operator.
The speed of string literals in JavaScript He said backtick literals are less performant (in other words, slower) because they need to processed. In other words, the variable interpolation that we want from backtick literals are an Achilles' heel — processing the template literals slows performance.
Variable and expression substitutions At this point, a template literal is just like a better version of a regular JavaScript string. The big difference between a template literal and a regular string is substitutions. The substitutions allow you to embed variables and expressions in a string.
In addition to its syntactical differences there are two very specific advantages to using template literals: Multi-line strings: A single string can span two or more lines. Expression Interpolation: Javascript variables and expressions can be inserted directly in the string.
It seems for the moment string concatenation is faster: http://jsperf.com/es6-string-literals-vs-string-concatenation
ES6 with variable 19,992,512 ±5.21% 78% slower String concatenation with variable 89,791,408 ±2.15% fastest ES6 with function 461,358 ±3.12% 99% slower String concatenation with function 503,255 ±1.77% 99% slower I tested was run on Chrome 43.0.2334.0 canary (64-bit), which is using V8 4.3.31, with the #enable-javascript-harmony flag enabled.
For reference, the latest version on Node.js (0.12.0 at the time of writing) is using V8 3.28.73: https://raw.githubusercontent.com/joyent/node/master/ChangeLog
I'm sure all the possible performance optimizations that could be applied have not been applied yet, so it would be reasonable to expect performance to get better as ES6 gets closer to finalization and these features get migrated to the stable branch.
Edit: Thanks for the comments @user1329482, @icl7126, Nicolai Borisik, and FesterCluck. Now that about 2 years have passed since this question was asked, ES6 browser support has greatly increased, and a good amount of performance optimization has taken place. Here are some updates.
Edit: (February 2020) Updated Chrome result based on @JorgeFuentesGonzález comments and subsequent confirmation.
In Chrome (as of 59.0.3035), ES6 string literals are faster:
ES6 with variable 48,161,401 ±1.07% fastest String concatenation with variable 27,046,298 ±0.48% 44% slower ES6 with function 820,441 ±1.10% 98% slower String concatenation with function 807,088 ±1.08% 98% slower Update: In Chrome (as of 79.0.3945), String concatenation is faster... See comments.
In Firefox (as of 57.0.0), ES6 string literals are faster:
ES6 with variable 1,924,610,984 ±0.50% fastest String concatenation with variable 1,876,993,458 ±0.79% 3% slower ES6 with function 539,762 ±5.04% 100% slower String concatenation with function 546,030 ±5.88% 100% slower In Safari (as of 11.0.2), it depends:
ES6 with variable 1,382,752,744 ±0.71% fastest String concatenation with variable 1,355,512,037 ±0.70% 2% slower ES6 with function 876,516 ±1.01% 100% slower String concatenation with function 883,370 ±0.79% 100% slower When using a typecast string, ES6 string literals are faster. However, when calling a function from the literal, string concatenation is faster in this example.
If you really want to go deep and need to squeeze every drop of performance out of Safari, I would suggest setting up tests that see if/how incorrectly typed variables and multiple references within a literal effect performance.
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
