facebook如何如此快速地呈现其页面[关闭]答案

【问题标题】：How facebook renders its pages so fast [closed]facebook如何如此快速地呈现其页面[关闭]
【发布时间】：2012-01-24 15:17:40
【问题描述】：

我在使用 facebook 时发现以下功能附加到其左侧垂直菜单中。

页面加载速度如此之快
页面确实启用了后退按钮
只有部分页面重新加载。

任何人都可以在“如何实现它？？？”中提出一些想法

【问题讨论】：

“只有部分页面重新加载”是 ajax 请求。

标签： jquery ajax facebook menu history

【解决方案1】：

您将希望使用这种类型的范例来获得最佳的用户体验。

AJAX 是你的朋友

只发送您需要的最少信息，以便向用户显示页面的轮廓。

<html>
<head>
...scripts, meta, css etc...
</head>
<body>
<h1>Facebook Info</h1>
<div id=facebook-info>
<p>loading...</p>
</div>

<h1>Twitter Info</h1>
<div id=twitter-info>
<p>loading...</p>
</div>

</body>
</html>

然后在每个内容部分（您尚未加载）中都有一个微调器。

在加载您的 javascript 时（为了清楚起见，我使用缩写...请参阅 http://jQuery.com/ 了解有关他们的 ajax 调用的更多信息），您可以调用特定的 php 页面，这些页面会输出一些 JSON。这是真正的工作发生并需要时间的地方。

<script>
$(document).ready(function(){
   $.ajax('/content/getFacebookInfo.php',displayFacebookContent);
   $.ajax('/content/getTwitterInfo.php',displayTwitterContent);
});
</script>

然后在 displayFacebookContent 和 displayTwitterContent 回调函数中，这是您为 DOM 动态构建内容的地方。

<script>
var displayTwitterContent = function(response) {
  var html = "<ul>";
  foreach(var i in response.posts) {
     html += "<li>" + response.posts[i].message + "</li>";
  }

  html += "</ul>";
  $('#titter-info).append(html);
};
</script>

再次，这是为了显示概念的缩写，您将必须充实脚本并构建响应 JSON 对象的 php 处理程序。

通过将繁重的工作卸载到 AJAX 处理程序，主 HTML 可以快速提供，并且用户很满意。当他的眼睛在页面上移动时，一些 AJAX 调用已经完成，您将动态插入可用数据到 DOM 中，他们会看到它。

这有点像谷歌在你输入时的搜索，它会在你点击提交之前对服务器进行 AJAX 回调并抓取内容供你实时显示。

还研究了应用程序级别和网络服务器级别的服务器端缓存。您还可以在网络级别进行一些缓存。

【讨论】：

是的。你说得很对。但在这种情况下，浏览器历史记录不起作用（后退按钮）以及它对搜索引擎不太友好

【解决方案2】：

我不再对 Facebook 内部非常熟悉，但有一些方法和技术可以解决这些问题：

如果您查看源代码，您会发现在正常环境中 Facebook 只加载 JavaScript 源文件。快速 JavaScript 重度应用程序所做的通常是加载静态压缩的 JavaScript（包括视图文件），然后仅请求 JSON 中的动态数据，然后在客户端上呈现。我最喜欢的仍然是编译速度非常快的EJS。
在支持 HTML5 的浏览器中，他们可能使用HTML 5 history。生成的 URL 还指向一个静态页面，因此当直接请求时，您不会丢失任何真实信息。作为后备方案，您可以执行基于哈希的历史记录，这仍然使后退按钮保持工作状态。
这只是使用AJAX 完成的

【讨论】：

【解决方案3】：

在所有基础设施之间，他们使用Cassandra、Memcached、用 C++ 编译的 PHP 等。 Here Facebook infra 的完整描述。

【讨论】：

【解决方案4】：

我终于找到了解决方案。他们广泛使用缓存技术和 jQuery 历史插件，该插件支持历史，因此使其对搜索引擎友好。

可以在这里找到 http://itswadesh.wordpress.com/2012/03/29/facebook-type-vertical-navigation-menu-created-with-jquery/

【讨论】：

这只是facebook快速的一小部分原因。不是一个完整的答案