平衡大型网站上的服务器端和客户端代码

时间:2021-08-22 17:59:37

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

让我们假设我正在编写Facebook(我不是),或其他涉及大量流量的网站。

Our general Layout is:

我们的总体布局是:

  1. All CSS is in external files
  2. 所有CSS都在外部文件中

  3. 99% of JS is in external files
  4. 99%的JS都在外部文件中

  5. The back bone of the websites HTML is generated by a PHP/MySQL backend.
  6. 网站HTML的骨干由PHP / MySQL后端生成。

  7. JS functions to generate the DOM of parts that commonly change.
  8. JS用于生成通常更改的部分的DOM。

  9. 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.
  10. 我们的服务器有一个inplace API,它返回JSON对象,这些对象被提供给我们的DOM构建器(JS函数),它们采用JSON对象数组,例如朋友列表,然后生成所有用于显示朋友列表的html,或事件等

Question

  1. Is this reasonable?
  2. 这合理吗?

  3. Is it common practice to have dedicated JS functions to build the DOM as I have mentioned?
  4. 如上所述,通常的做法是使用专用的JS函数来构建DOM吗?

  5. Is this scalable? Is JS too slow? (btw, we use JQuery almost exclusively)
  6. 这可扩展吗? JS太慢了吗? (顺便说一句,我们几乎只使用JQuery)

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.

我知道它极大地降低了带宽和服务器负载,因为服务器不再遍历朋友列表(它也通过MySQL查询)并生成所有HTML,而是进行查询并返回一个小JSON对象。这似乎对我好,但我想要第2 /第3 /第4 / ......意见。

Thanks alot!

Let me know if I am missing any critical information.

如果我遗漏任何重要信息,请告诉我。

3 个解决方案

#1


1  

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.

我觉得你的布局很不错,但我还是建议你去读YAHOO!加速网站的最佳实践。它比我能做的更好地总结了(在我看来非常好读)。

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

我认为facebook为实现它的规模做了三件最重要的事情:

  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. CACHING => Memcached。这个非常重要。您应该记住,与MEMORY相比,磁盘IO的速度很慢(根据我的书,磁盘5毫秒/内存40-80ns)。 Facebook几乎拥有内存中的所有活动数据。这些旧幻灯片表示他们的内存超过5TB。这将是现在更多的方式!

  3. HIPHOP => https://github.com/facebook/hiphop-php/wiki/
  4. HIPHOP => https://github.com/facebook/hiphop-php/wiki/

  5. OFFLINE PROCESSING => Use a message queue like for example redis, beanstalkd, gearman just to name a few.
  6. OFFLINE PROCESSING =>使用消息队列,例如redis,beanstalkd,gearman等等。

Some other interesting links:

其他一些有趣的链接:

#2


1  

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.

鉴于JS引擎正在不断发展以提高性能,我认为这是一个非常好的设计。随着HTML5&Co的普及,我们将越来越多地看到它。

#3


1  

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.

这是我正在迈向的方法。我很高兴。 JS肯定不会太慢。你需要一个好的JS模板系统。 Trimpath JS模板是我尝试过的人的最爱。

#1


1  

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.

我觉得你的布局很不错,但我还是建议你去读YAHOO!加速网站的最佳实践。它比我能做的更好地总结了(在我看来非常好读)。

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

我认为facebook为实现它的规模做了三件最重要的事情:

  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. CACHING => Memcached。这个非常重要。您应该记住,与MEMORY相比,磁盘IO的速度很慢(根据我的书,磁盘5毫秒/内存40-80ns)。 Facebook几乎拥有内存中的所有活动数据。这些旧幻灯片表示他们的内存超过5TB。这将是现在更多的方式!

  3. HIPHOP => https://github.com/facebook/hiphop-php/wiki/
  4. HIPHOP => https://github.com/facebook/hiphop-php/wiki/

  5. OFFLINE PROCESSING => Use a message queue like for example redis, beanstalkd, gearman just to name a few.
  6. OFFLINE PROCESSING =>使用消息队列,例如redis,beanstalkd,gearman等等。

Some other interesting links:

其他一些有趣的链接:

#2


1  

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.

鉴于JS引擎正在不断发展以提高性能,我认为这是一个非常好的设计。随着HTML5&Co的普及,我们将越来越多地看到它。

#3


1  

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.

这是我正在迈向的方法。我很高兴。 JS肯定不会太慢。你需要一个好的JS模板系统。 Trimpath JS模板是我尝试过的人的最爱。