balancing Server side and Client side code on a large website

Let's suppose I am programming Facebook (which i'm not), or some other site that involves heavy traffic.

Our general Layout is:

1. A开发者_开发问答ll CSS is in external files
2. 99% of JS is in external files
3. The back bone of the websites HTML is generated by a PHP/MySQL backend.
4. JS functions to generate the DOM of parts that commonly change.
5. Our server has an inplace API that returns JSON objects that are fed to our DOM builders (JS functions), which take an JSON object array of lets say, a list of friends, then generated ALL the html used for displaying a list of friends, or events, etc.

Question

6. Is this reasonable?
7. Is it common practice to have dedicated JS functions to build the DOM as I have mentioned?
8. Is this scalable? Is JS too slow? (btw, we use JQuery almost exclusively)

I know that it tremendously lowers bandwidth and server load, as the server is no longer iterating through a list of friends (of which it also queried for via MySQL) and generating all the HTML, but instead making a query and returning a small JSON object. which seems ok to me, but I would like a 2nd/3rd/4th/... opinion.

Thanks alot!

Let me know if I am missing any critical information.

I think your layout is pretty good, but I would still advice you to read YAHOO! Best Practices for Speeding Up Your Web Site. It summarizes it better(very good read in my opinion) than I could do.

I think the three most important things facebook does to achieve it's scale:

1. CACHING => Memcached. This one is really important. You should remember that doing disk IO is slow compared to MEMORY(disk 5ms / memory 40-80ns according to my book). Facebook has almost all the active data in memory. These old slides say they have more than 5TB in memory. This is going to be way more by now!
2. HIPHOP => https://github.com/facebook/hiphop-php/wiki/
3. OFFLINE PROCESSING => Use a message queue like for example redis, beanstalkd, gearman just to name a few.

Some other interesting links:

• http://sizzo.org/wp/talks
• http://www.facebook.com/pages/Scalable-web-architectures/310457196919?v=wall

Given that JS engines are being constantly developed towards improved performance, I think it's a pretty good design. We will be seeing it more and more often as HTML5 & Co gains popularity.

This is the approach I'm moving towards. I'm pretty happy with it. JS is certainly not too slow. You'll want a good JS templating system. Trimpath JS Templates is my favorite of those I've tried.