Sunday, May 19, 2024
 Popular · Latest · Hot · Upcoming
19
rated 0 times [  22] [ 3]  / answers: 1 / hits: 42816  / 9 Years ago, sat, march 14, 2015, 12:00:00

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>`

More From » string

 Answers
6

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.


[#67433] Thursday, March 12, 2015, 9 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
bryonk

Total Points: 161
Total Questions: 116
Total Answers: 107

Location: Albania
Member since Sun, Nov 22, 2020
4 Years ago
bryonk questions
;