DEV Community

Cover image for Benchmarking String Literal ("") vs Template Literal (``) - using Performance.now()

Benchmarking String Literal ("") vs Template Literal (``) - using Performance.now()

Muhammad A Faishal on July 27, 2023

Let's talk about String in JavaScript. There are 2 ways developers can define a string: a. Using String Literal const str = "Hello " + "world!"...
Collapse
 
jonrandy profile image
Jon Randy πŸŽ–οΈ

You should really test in more than one environment. What holds true in NodeJS may not hold true in other JS engines.

Collapse
 
maafaishal profile image
Muhammad A Faishal • Edited

Yeah, that is possible. I chose Node JS because it's currently the most popular JavaScript runtime used by many developers.

Thanks for the suggestion. I'll make a note of it.

Collapse
 
miketalbot profile image
Mike Talbot ⭐

Isn't Chrome probably the most popular JavaScript runtime?

Thread Thread
 
maafaishal profile image
Muhammad A Faishal

yeah, it can also, but Chrome is different thing. I meant between Node, Deno, and Bun.

Thread Thread
 
jamesthomson profile image
James Thomson

They both use the same engine, V8, so much of a muchness, really.

Collapse
 
imista profile image
Benjamin Rodriguez

It's amazing! I never think about the difference

Collapse
 
maafaishal profile image
Muhammad A Faishal

I'm glad I could help!

Collapse
 
miketalbot profile image
Mike Talbot ⭐ • Edited

My tests show that concat is faster if the strings being concatenated are longer. There is a lot less work going on and a lot less memory allocated using concat - therefore less garbage collection.

My test case is indicative of the kinds of volumes a website concatenating articles might face, possibly smaller. I would point out that all of them are very fast and this should probably not be the first point of optimisation.

Collapse
 
maafaishal profile image
Muhammad A Faishal • Edited

It's interesting, I checked that concat is the lowest now. This is the reason I didn't use neither measurethat nor perflink, because the result is always different.

Anyway, I hardly ever use concat, nice reference.

Collapse
 
fruntend profile image
fruntend

Π‘ongratulations πŸ₯³! Your article hit the top posts for the week - dev.to/fruntend/top-10-posts-for-f...
Keep it up πŸ‘

Collapse
 
jcubic profile image
Jakub T. Jankiewicz

I suggest to watch this, you will change your mind about the benchmark results:

Collapse
 
maafaishal profile image
Muhammad A Faishal

It's interesting, so much magic behind V8. Regardless, this post just shows the perspective of using performance.now() for string literal and template literal. From this, we can also do other things to improve the accuracy.

Anyway, thanks for sharing. I got new ideas from the video.

Collapse
 
kodcapsule profile image
KUSEH SIMON WEWOLIAMO

Amazing , a good read .

Collapse
 
pravneetdev profile image
Pravi

This was a good read!

Collapse
 
ethanwillingham profile image
Ethan Willingham

Thank you for your work! You’ve helped me deepen my understanding of JavaScript!

Collapse
 
maafaishal profile image
Muhammad A Faishal

Happy to help!

Collapse
 
miguelowd profile image
Miguel Ortega Ward

Interesting post!

Collapse
 
natikos profile image
natikos

It’s odd, I am pretty sure I saw similar post about comparision string and template literals and the outcome was different (in favor of template literal) 🀨

Collapse
 
maafaishal profile image
Muhammad A Faishal

I'd love it if you could share it

Collapse
 
jtlapp profile image
Joe Lapp

Interesting. What about memory usage and garbage collection frequency?

Collapse
 
maafaishal profile image
Muhammad A Faishal

I didn't check either one. I'll make a note of it to be a reference for my next post.

Good question.

Collapse
 
respect17 profile image
Kudzai Murimi

I never thought about the difference too

Collapse
 
zirkelc profile image
Chris Cook

I’m not sure if a simple assignment of exactly same the string gives much insight. I could imagine that V8 is able to optimize it away and just generates static operations.

Collapse
 
maafaishal profile image
Muhammad A Faishal • Edited

It's supposed to be. Regardless, I still did it to have an actual data about the two