加载数据时浏览器忙指示

Question

我正在努力实现这里所解释的内容.

我正在尝试使用动态脚本标记从服务器向客户端加载一些数据.(即我创建一个脚本标记,将其src设置为我的JSON控制器并将其附加到我的头部或身体标记).

脚本正确加载从服务器返回的数据.但在脚本加载期间,浏览器不会显示忙碌指示符(尝试使用Chrome/Firefox)(根据此参考(第35页),这应该是默认行为).

此外,我已经添加了Sleep方法到我的服务器端方法来模拟一个长时间运行的进程,看到忙指示符出现.但仍然没有运气.

Ps当我使用IFrame而不是script,一切正常,繁忙的指标由浏览器显示.但是不能用脚本标签来做.

Answer 1

简而言之：

facebook 在加载页面数据时确实使用了 iframe，并且浏览器加载指示器没有什么神奇之处。

更多细节：

当您从一个页面导航到另一个页面时，FB 会向 DOM 中注入一个隐藏的 Iframe，并且其 src 属性将设置为您请求的页面（有几个参数表明这是一个类似 ajax 的请求，而不是整个页面刷新）。所以页面实际上是在隐藏的 iframe 中加载的。然而，内容不是 HTML，而是一堆 javascript 标签，它们使用一些包含 HTML 和渲染页面所需的其他数据的 JSON 对象。
下面是当 iframe 注入到 DOM 时加载页面期间我的 firebug 控制台。您可以检查页面加载完成后，iframe 是否被删除。

要了解这些脚本如何加载页面数据，您可以阅读BigPipe 技术。简而言之，它将每个页面的构造分解为几个所谓的pagelet，它们拥有自己的 CSS 和 JS 资源集，因此每个 pagelet 的资源可以与其他 pagelet 并行地从服务器获取。big_pipe在所有资源可用后，将设法将每个 pagelet 放入其容器中。