gmail loading progress bar 实现原理

　　Gmail 登陆时，会显示一个progress bar， 显示加载的进度。
最先以为是模拟的效果，但是仔细观察发现，进度条是真实反映加载以及下载进度的，并不依赖网络状况。
所以非常好奇，因为在javascript中缺少检测文档下载进度的ApI（js的安全机制也禁止这样做），且只提供了加载开始，加载中，加载完成（或加载错误）等状态。那么，gmail 是如何实现实时监控加载百分比的呢？
　　用firebug 监控 gmail登陆时的文件下载，可以找到一个get请求，该请求返回html文本，文件大小为300多k，在其中找到这样一个函数：

1. function _B_prog(pct){<br>    top["pr"] = pct;<br>    if (_B_thumbStyle_ === undefined) {<br>        var thumb = top.document.getElementById("lpt");<br>        _B_thumbStyle_ = thumb ? thumb.style : null<br>    }<br>    if (_B_thumbStyle_) {<br>        _B_thumbStyle_.width = Math.round(pct * 0.99) + "%";<br>        if (pct == 100) <br>            _B_thumbStyle_ = null<br>    }<br>}

复制代码

该函数在html body 后定义。定义可知，进度条由该函数动态实现。

再来看后面大段大段的[/code]

1. [/code]。。。
2. 一直到
3. [code]

复制代码

结果很明显，进度条就是这样每加载一段js，就调用进度函数来显示进度。
但是，等等，通常加载html时，并不是一段接着一段下载并加载，而是，等整个文件下载完成后再加载执行，这样就没有实时监控下载进度的效果了。
关键就是在这里，gmail并没有使用静态资源供客户端下载，而是通过类似servlet技术返回html。
这里用到了一点服务器推的技术，就是在每个</script>标签结束处调用PrintWriter.flush(), 在该方法之后，服务器端输出流会马上推送至客服端，但并没有关闭输出流，下次还可以再次调用flush(), 这样就可实现一段接一段将资源推送至客户端，实现进度监控了，而不是像目前webQQ一样模拟从0% ，然后等待，然后突然升到100%完成。
搞定，休息！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！