Photo by Mathew Schwartz on Unsplash

Svelte is really fast

In my testing, Svelte performs exceptionally well.

Kevin Ghadyani
May 6, 2020 · 5 min read

I heard a bunch of claims from the creator of Svelte about its render speed. I wanted to know more and delved into the source code. After reviewing the source and asking the creator a few questions, I tried my hand at breaking it with the 10,000 Processes code.

This article goes into detail about Svelte v3. At the time of writing, the extent of my experience with Svelte is only its performance. Because of that, this won’t be a run-down on how to build an app.

Click here to save the snippet for this post to your Cacher library.

Svelte is faster than React

I ported my React 10,000 Processes code over to Svelte. Code here: https://svelte.dev/repl?version=3.1.0&gist=17a9b7ea0c0176b2e28d9b30e079e5ad

It hit a smooth framerate and rendered everything with ease. I pushed it further and found it stable at up to 50K processes, but at a much lower framerate. I couldn’t even get my React example up to 25K without it freezing up.

Performance-wise, Svelte is faster than React. Maybe not in every situation, but definitely in the one I tested. That’s really impressive and a tribute to the improvements the Svelte developers have made to DOM rendering.

Svelte is serious business. I haven’t worked with a modern framework this fast in a while. If you need to support embedded devices or want to get some crazy speed out of your renderer, Svelte’s a great choice. Rich Harris, the creator, made something killer. I’ve love to see this performance in other rendering libraries.

How does Svelte work?

It takes each variable in your code and does a React-like setState behind the scenes. See, what you look at when coding Svelte looks like normal JS; in fact, it looks like normal HTML with the JS in a script tag. Very Backbone right? But it’s not.

You see, Svelte compiles that code into JavaScript. Just like JSX, it takes that HTML and turns it into JS too!

That’s pretty wild. So how does it work?

You have code like this:

And Svelte compiles it into this:

If you have a JS variables and then modify them like this:

This is what happens when Svelte compiles to JS:

Notice the $$invalidate function? This is an internal feature of Svelte that gets compiled into your code. As you can see, it’s not touching your code at all, it’s just passing the returned value of your = into a function so Svelte can check for changes.

Why’s it fast?

History

React improved on AngularJS (and other frameworks at the time) by creating a virtual DOM and rendering to that first before rendering to the actual DOM. With a virtual DOM, it could make a fairly cheap comparison between the virtual DOM and your rendered output. It finds any changes, and only render those changes.

Thing is, it’s actually comparing the entire DOM tree, not just the part you changed. So as your app grows and renders more components, React slows down. The more changes you make and the faster you make them, the slower this comparison becomes.

At my last job, I made a small-scale production app that ran into virtual DOM performance problems. I had to memoize certain components and utilize shouldComponentUpdate to speed it up. Even still, it wasn’t perfect. If only concurrent mode was ready at the time. While the diffing cost is minimal in most applications, it worsens the larger your component tree; especially on mobile.

In later versions of React, concurrent mode will go live. This splits up those virtual DOM comparisons into chunks which greatly speeds it up. Still, this is a hack and has some major side effects in certain use cases. I’ve also run into those, but only in testing.

Learning from React’s mistakes

I looked at the source code. As soon as a change occurs, that change renders to the DOM. Any affected children are also sent through the ringer and those changes are also rendered.

If another change occurs during this timeframe, it’s added to the render queue and is processed in time. It’s possible for new renders to come in that change old ones; although, I’m not sure exactly how Svelte deals with those situations.

Once all renders have completed, the render loop stops processing and goes back to sleep; waiting for changes. It’s extremely efficient and renders as fast as the browser can handle. This is the key to Svelte’s speed advantage.

Conclusion

Svelte is fairly new so there are currently few experts who know how to use it in a larger codebase. If you know more than I do, please feel free to comment below and get in contact with me. I’d love for someone to change my mind on this speedy framework.

I look at quite a few factors when hooking up a DOM renderer in my own projects:

  • How quickly can I get up ‘n going?
  • How much do I have to learn to accomplish my goal?
  • How easy is it to debug and maintain over time?
  • Does it have hot-reloading?
  • Can I use my existing tools like Sublime Text?

React has a huge following, and I don’t believe that’ll change for the same reason AngularJS is still a thing. Svelte made a pretty large slam dunk with some big names in the JS community so it might take some of the marketshare. It’s definitely something to keep in mind when looking at React alternatives.

As a side note, .svelte syntax is now supported on GitHub so you won’t have anything to worry about there.

On the other hand, I’m a big user of Colorcoder for semantic highlighting in Sublime Text and there are definitely some issues to iron out.

Cacher is a code snippet organizer for pro developers — beautiful user-centric UI, integrations for popular editors/IDEs, support for 100+ languages.

Sign up at cacher.io.

Cacher App

The code snippet organizer for professional developers

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store