Facebook 如何在 AJAX 页面加载期间显示浏览器加载进度？
为了保持 IM 客户端始终处于登录状态，Facebook 在将页面插入文档之前使用 AJAX 加载其页面，从而避免整页加载。
然而，在 Facebook AJAX 请求期间，浏览器似乎正在加载；重新加载按钮变为 X，浏览器内置的进度指示器指示加载/等待等）
我已经能够成功实现基于 AJAX 的导航，但我的浏览器没有显示任何加载指示（因为请求是异步）Facebook 是如何做到的？
In order to keep the IM Client logged in at all times Facebook avoids full page loads by using AJAX to load its pages before inserting them into the document.
However, during Facebook AJAX requests the browser appears to be visibly loading; the reload button changes to an X, and the progress indicator built into the browser indicates loading/waiting etc)
I've been able to implement AJAX based navigation successfully, but my browser doesn't show any indication of loading (since the requests are asynchronous) how do Facebook do it?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
当文档中有正在加载的元素时，浏览器会显示加载状态。 Ajax 请求完全由 JavaScript 发出；文档不受影响，因此不会触发加载状态。
另一方面，Facebook 的大多数请求都是通过在文档中插入
如果您不小心，此技术/JSONP 可能会使您的站点面临安全风险，因为允许跨站点请求。 Facebook 通过为每个资源生成随机 URL 来处理此问题，这些 URL 在初始页面加载时发送到浏览器。
The browser displays the loading state when there is an element in the document which is loading. Ajax requests are made entirely from within JavaScript; the document is not affected and so the loading state isn't triggered.
On the other hand, most of Facebook's requests are made by inserting a
<script>tag into the document, pointing to a JavaScript file containing the data they want. (Essentially JSONP, except they use a different format.) The browser will displaying its loading state because the<script>tag is an unloaded element in the document.This technique/JSONP can expose your site to security risks if you're not careful, because cross-site requests are allowed. Facebook deals with this by generating random URLs for each resource, which are sent to the browser in the initial page load.
Facebook 使用他们开发的一种名为 Big Pipe 的工具，基本上将他们的网站分块传输到客户端。他们将带有裸 DOM 的初始脚本标记发送到客户端，并且脚本异步加载页面上的模块 - 这个想法是客户端在服务器获取模块 2 的同时呈现模块 1，因此缩短了加载时间。
最重要的是，他们使用了一种称为长轮询的技术。通过 HTTP 1.1，他们可以利用持久连接，而不必担心超时。当页面呈现时，客户端脚本向 Facebook 发出 AJAX 请求，本质上是“监听”事件。它会坐在那里倾听，直到事件发生。与此同时，浏览器将显示为“正在加载”数据。
当 Facebook 端触发事件时（比如有人对您的帖子发表评论），FB 会将该响应发送回客户端以触发相应的回调（例如弹出一个小工具提示，让您了解该评论）并立即向 FB 发送另一个请求以侦听下一个事件。
Facebook uses a tool they developed called Big Pipe to basically stream their site to the client in chunks. They send an initial script tag with a bare DOM to the client, and the script loads modules on the page asynchronously - the idea being the client is presenting module 1 while the server is fetching module 2, therefore improving load time.
On top of that, they use a technique called long polling. With HTTP 1.1 they can take advantage of a persistent connection and not have to worry about timeouts. When the page is rendered, the client-side script makes an AJAX request to Facebook to essentially "listen" for an event. It will sit there and listen until an event happens. In the meantime, the browser will appear to be "loading" data.
When an event is triggered on Facebook's end (say someone commented on your wall post), FB will send that response back to the client to fire the respective callbacks (like popping up a little tool-tip letting you know about the comment) and IMMEDIATELY send another request to FB to listen for the next event.
当 Facebook 希望显示浏览器“忙碌”状态时，他们使用 iframe 进行通信。
您可以通过在父窗口中调用 iframe 函数来使用 iframe 进行跨域 ajax。
Facebook use iframes for communication when they want the browser 'busy' status to appear.
You can use iframes to do cross domain ajax by having the iframe call functions in the parent window.