Why exactly is server side HTML rendering faster than client side?

Question

I am working on a large web site, and we're moving a lot of functionality to the client side (Require.js, Backbone and Handlebars stack). There are even discussions about possibly moving all rendering to the client side.

But reading some articles, especially ones about Twitter moving away from client side rendering, which mention that server side is faster / more reliable, I begin to have questions. I don't understand how rendering fairly simple HTML widgets in JS from JSON and templates is a contemporary browser on a dual core CPU with 4-8 GB RAM is any slower than making dozens of includes in your server side app. Are there any actual real life benchmarking figures regarding this?

Also, it seems like parsing HTML templates by server side templating engines can't be any faster than rendering same HTML code from a Handlebars template, especially if this is a precomp JS function?

Answer 1

There are many reasons:

1. JavaScript is interpreted language and is slower than server side (usually done in compiled language)
2. DOM manipulation is slow, and if you are manipulating it in JS it results in poor performance. There are ways to overcome this like preparing your rendering in text then evaluating it, this might in fact gets you as close to server side rendering.
3. Some browsers are just too slow, especially old IE

Answer 2

• Performance of compiled language versus interpreted javascript
• Caching, ie - serving up the exact same page another user has already requested, this removes the need for each client to render it. Great for sites with huge traffic - ie news sites. Micro-caching can even provide near real-time updates, yet serve significant traffic from the cache. No need to wait for client rendering
• Less reliance on users with old computers or slow / crippled browsers
• Only need to worry about rendering, less reliance on how different browsers manage DOM (reliability)

But for a complex UI, client side rendering of interactions will provide a snappier user experience.

It really depends on what performance you're trying to optimise, and for how many users.

Answer 3

To run code on the client side it first has to be loaded. Server side code is just loaded when the server start, whereas the client code must potentially be loaded every time the page is. In any case the code must be interpreted when loading the page, even if the file is already cached. You might also have caching of JS parse trees in the browser, but I think those are not persisted, so they won't live long.

This means that no matter how fast JavaScript is (and it is quite fast) work has to be performed while the user waits. Many studies have shown that page loading time greatly affects the users perception of the sites quality and relevance.

Bottom line is that you have 500ms at the most to get your page rendered from a clean cache on your typical developer environment. Slower devices and networks will make that lag just barely acceptable to most users.

So you probably have 50-100ms to do things in JavaScript during page load, all of it, grand total, which means that rendering a complex page, well, not easy.