如何针对后台多个异步请求导致的延迟优化基于web的应用程序？

Question

我正在设计一个基于瘦服务器客户端MVC架构的模块化RIA。现在，应用程序只完成了10%，因此现在纳入设计更改还不算太晚。

应用程序的设计方式是，它最初加载时占用的空间非常小，并且根据用户执行的操作，异步获取大量数据。这些数据可能既包括存储在我的服务器中的数据，也包括来自第三方web服务的数据，包括社交网络和微博服务。

然而，我担心的是，有没有可能在后台运行的多个数据密集型ajax请求会导致浏览器停滞？我最近在一些社交内容聚合服务中观察到一些严重的延迟问题，在分析客户端代码后，我惊讶地发现客户端的应用程序占用空间非常小，完全在300KB以内。但是，在运行应用程序时，浏览器( Firefox和IE)经常挂起，并且需要几秒钟才能恢复。对异步请求的分析表明，该应用程序似乎同时从gmail、facebook和twitter获取用户内容，并将其推送到DOM中，占用了太多的内存资源。

如果有人能给我指出一些预防此类问题的指导方针/最佳实践，那就太好了。可取的做法是编写一个自定义包装器脚本，以预先指定的重要性顺序在后台加载内容，而不是将它们全部并行加载，这最终可能会导致多个回调被并行执行。

任何建议都将不胜感激。

Answer 1

一个解决方案，嗯，这并不是所有情况下的杀手级解决方案，但一个解决方案是在服务器端委托内容聚合，而不是在最终的浏览器中。

这可以使用ESIGates来完成。其中之一是Varnish-Esi，但它并不涵盖整个ESI specification。This one (esigate.org)也是开源的，可能会有更好的覆盖率(还没有测试)。ESI系统意味着您的应用程序布局可以是具有不同缓存策略(TTL)和不同提供者的各种块的组合。ESI服务器将从最初传输到最终浏览器的流量中提取一部分，因此这个将花费更多的带宽，但至少与客户端使用的不同浏览器相比，在此软件上您将获得更多的控制。

至少它可以改进服务器上异步数据加载的缓存策略，这样就可以加快最终浏览器的响应时间(更好的响应时间，更少的并行工作)。

现在从更好的方面来说，根据你页面上的优先级，你当然应该确定什么是最重要的内容，用户可以开始使用的内容，以及什么只是一个'decoration‘(好吧，这意味着你的服务是一个良好的信息/噪声比，如果你的网站除了社交网络聚合之外什么都没有提供，你就会遇到问题)。

我假设您的应用程序是一个具有大量异步加载数据的小型静态应用程序，因此您使用了大量的ajax，并且没有太多的页面更改。这意味着一旦加载了内容，它将在页面中驻留很长一段时间。

因此，让社交网络和其他web服务内容、、延迟的和链接，而不是大量的并行负载应该不是问题。也许它不会在前15分钟出现，但如果它在接下来的15分钟里一直停留在页面上，那么这可能不是问题(如果最重要的内容已经存在，用户可能甚至不会注意到装饰内容不可用)。这里有一个IE6 (有时也是IE7)提示，在任何地方使用SetTimeouts() js命令强制页面重绘，你会看到可用的内容显示得更快。

最后一个技巧，如果您需要对更新的内容进行一些常规的ajax检查。如果你真的每分钟检查10个内容，你总是会遇到并行加载问题和一个大的活动，和初始加载一样的问题，通常你可以使用两个东西来解决这个问题，一个是HTTP 家族的长时间运行的连接(所以你可以改为推送数据和/或获得更快的响应，但只有在你的服务器针对这种HTTP流量进行了调优的情况下)。第二个是为下一次检查添加一个时间因子，这样第一次检查是在1分钟后，下一次是2分钟，然后是3，15，25，等等，最后你可能每小时才有一次新的检查。而且，当您检测到来自用户的某些活动(一些用户交互)时，您可以减少下一次检查延迟。这是因为您可以假设，只有当用户真正对您的页面做某些操作时，他才真正在寻找新的数据。您将节省一些用户CPU，还将帮助您的服务器加载。

Answer 2

由于Facebook/LinkedId/etc插件的原因，我的页面加载也有延迟。

我的解决方案是异步加载第三方JavaScript。它并不适用于每个web服务/小工具，但适用于其中的许多(Facebook的“赞”按钮，Twitter的"tweet“按钮等)。

示例：

<div id="tweet">
    <a href="http://twitter.com/share" 
        class="twitter-share-button" 
        data-count="horizontal"
    >Tweet</a>
</div>
<script type="text/javascript">
    $(function() {
        $.getScript('http://platform.twitter.com/widgets.js');
    });
</script>

此代码将在页面(DOM)加载后呈现"Tweet“按钮。

但是您应该首先检查所请求的web服务的JavaScript是否使用了document.write()。如果是这样-你在这里什么也做不了，只有同步加载是可能的。