Facebook如何在AJAX页面加载期间显示浏览器加载进度？

Question

为了让IM客户端始终登录，Facebook可以在将页面加载到文档之前使用AJAX加载页面来避免整页加载。

然而，在Facebook AJAX请求期间，浏览器似乎明显加载;重新加载按钮变为X，浏览器内置的进度指示器指示加载/等待等）

我已经能够成功实现基于AJAX的导航，但我的浏览器没有显示任何加载指示（因为请求是异步的）Facebook如何做到这一点？

Answer 1

当正在加载文档中的元素时，浏览器显示加载状态。 Ajax请求完全来自JavaScript;文档不受影响，因此不会触发加载状态。

另一方面，Facebook的大多数请求是通过在文档中插入<script>标记，指向包含所需数据的JavaScript文件。 （基本上是JSONP，除了它们使用不同的格式。）浏览器将显示其加载状态，因为<script>标记是文档中的卸载元素。

如果您不小心，此技术/ JSONP可能会使您的网站面临安全风险，因为允许跨站点请求。 Facebook通过为每个资源生成随机URL来处理此问题，这些URL在初始页面加载时发送到浏览器。

Answer 2

Facebook使用他们开发的名为Big Pipe的工具基本上将他们的网站流式传输到客户端。他们向客户端发送带有裸DOM的初始脚本标记，并且脚本异步加载页面上的模块 - 客户端在服务器获取模块2时呈现模块1的想法，因此改善了加载时间。

最重要的是，他们使用了一种名为长轮询的技术。使用HTTP 1.1，他们可以利用持久连接，而不必担心超时。呈现页面时，客户端脚本向Facebook发出AJAX请求，基本上是＃34; listen＆＃34;对于一个事件。它将坐在那里听，直到事件发生。与此同时，浏览器似乎是＆＃34; loading＆＃34;数据。

当Facebook上的某个事件被触发时（比如有人评论你的墙贴），FB会将该回复发送回客户端以触发相应的回调（比如弹出一个小工具提示让你知道评论）并立即向FB发送另一个请求以收听下一个事件。

Answer 3

当Facebook希望浏览器显示“忙碌”状态时，它会使用iframe进行通信。 您可以使用iframe通过在父窗口中使用iframe调用函数来执行跨域ajax。