11

我想在没有获得直接许可的情况下粗略估计用户的上传速度。这只是为了区分非常慢的连接和非常快的连接，所以准确性并不是非常重要......

4

3 回答 3

12

这是使用XMLHttpRequest扩展@Yiğit Yener 的想法的实现。

上传速度取决于两件事：用户的连接速度和服务器的连接速度。我在这里假设您想测试用户和服务器之间的速度。并且XMLHttpRequest，由于同源策略，这确实是唯一的选择。

使用上传速度，您无需返回任何内容。您只需要将POST大量数据传输到服务器上的任何页面。最容易点击的页面是您已经打开的页面。为此，您可以将 url 的域部分完全保留在.open(). POST某些服务器上的数据限制为 2 兆字节，所以为了安全起见，我使用了一个。一个就足以获得体面的阅读。

为了防止 URL 被缓存，我在末尾附加了一个随机数。

url = '?cache=' + Math.floor( Math.random() * 10000 )

为了防止POST数据被压缩，我使用随机数据。该函数允许您传递要检查的迭代次数。迭代间隔为每五秒一次。每次迭代都会以该update检查的速度和所有检查的移动平均值调用回调。使用尽可能多的迭代来获得所需的准确性。如果你只是想要一个粗略的估计，一次迭代就足够了。

它是这样称呼的：

checkUploadSpeed( 10, function ( speed, average ) {

} );

演示

您可以在此处尝试此代码。

私人服务器

你可以在ThinkingStiff 自己的服务器上试试这个，这可能是所有这些中最快的。

堆栈片段

    function checkUploadSpeed( iterations, update ) {
        var average = 0,
            index = 0,
            timer = window.setInterval( check, 5000 ); //check every 5 seconds
        check();

        function check() {
            var xhr = new XMLHttpRequest(),
                url = '?cache=' + Math.floor( Math.random() * 10000 ), //random number prevents url caching
                data = getRandomString( 1 ), //1 meg POST size handled by all servers
                startTime,
                speed = 0;
            xhr.onreadystatechange = function ( event ) {
                if( xhr.readyState == 4 ) {
                    speed = Math.round( 1024 / ( ( new Date() - startTime ) / 1000 ) );
                    average == 0 
                        ? average = speed 
                        : average = Math.round( ( average + speed ) / 2 );
                    update( speed, average );
                    index++;
                    if( index == iterations ) {
                        window.clearInterval( timer );
                    };
                };
            };
            xhr.open( 'POST', url, true );
            startTime = new Date();
            xhr.send( data );
        };

        function getRandomString( sizeInMb ) {
            var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+`-=[]\{}|;':,./<>?", //random data prevents gzip effect
                iterations = sizeInMb * 1024 * 1024, //get byte count
                result = '';
            for( var index = 0; index < iterations; index++ ) {
                result += chars.charAt( Math.floor( Math.random() * chars.length ) );
            };     
            return result;
        };
    };
    
    checkUploadSpeed( 10, function ( speed, average ) {
        document.getElementById( 'speed' ).textContent = 'speed: ' + speed + 'kbs';
        document.getElementById( 'average' ).textContent = 'average: ' + average + 'kbs';
    } );
<div id="speed">speed: 0kbs</div>
<div id="average">average: 0kbs</div>

JSFiddle

托管演示的 JSFiddle 服务器速度较慢。

单击此按钮转到小提琴：

JSFiddle

于 2013-03-19T03:11:24.240 回答
2

您可以向发送/返回大量数据的服务发出异步 ajax 请求，并测量客户端加载所需的时间。这当然会受到客户端当前网络使用情况的影响。

于 2013-03-18T08:18:29.000 回答
1

想到的一种方法是创建一个iframe带有aform的a ，用大量随机字符textarea填充，然后以编程方式提交表单。textarea让提交响应调用父窗口来说明它何时完成，并测量从提交到完成的时间。您可能会从一个相对较小的有效负载开始（因此在连接速度较慢的情况下不会永远持续），如果恢复得很快，请重复使用越来越大的有效负载，直到您对结果满意为止。我想，同样的事情可以用 ajax 来完成，不知道为什么我立刻想到了iframe. 在 Stack Overflow 上查看我的其他答案，但要考虑越来越大的表单数据而不是下载数据。

这将为您提供一个非常粗略的上传速度衡量标准。

于 2013-03-18T08:19:34.753 回答