Safari 超高速连接(1Gbps)问题修复


我们使用了你的插件来支持多文件上传,我们数据中心局域网的数据吞吐速度可以达到 1 Gbps,但是当我在内网进行测试时,Safari 会一直挂起,尤其在传输大文件时。另外,我们的产品会拥有相同吞吐量的内部用户,真不是我龟毛,哭脸555。

不过我发现了问题的原因:xhr.upload.onprogress 回调触发得过于频繁,导致在上传大文件时浏览器就挂了。

我是这么修复这个问题的,将下面内容:

_initProgressListener: function (options) {
            var that = this,
                xhr = options.xhr ? options.xhr() : $.ajaxSettings.xhr();
            // Accesss to the native XHR object is required to add event listeners
            // for the upload progress event:
            
            if (xhr.upload && xhr.upload.addEventListener) {
                xhr.upload.addEventListener('progress', function (e) {
                    that._onProgress(e, options);
                }, false);
                options.xhr = function () {
                    return xhr;
                };
            }
        },

改成

_initProgressListener: function (options) {
            var that = this,
                xhr = options.xhr ? options.xhr() : $.ajaxSettings.xhr();
            // Accesss to the native XHR object is required to add event listeners
            // for the upload progress event:
            if (xhr.upload && xhr.upload.addEventListener) {
                xhr.upload.addEventListener('progress',
                    jQuery.throttle(100, function (e) {
                        that._onProgress(e, options);
                    }), 
                    false);
                options.xhr = function () {
                    return xhr;
                };
            }
        },

我使用了 throttle 插件来限制调用 _onProgress 的次数。关于 throttle 可以参阅 http://benalman.com/projects/jquery-throttle-debounce-plugin/

希望我的文章能帮到大家 :)