10

我已经看到了许多没有回答这个问题的问题，是否可以使用 java 脚本检查某人的带宽并根据它加载特定的内容？

在使用我的手机和在不知名的地方时，BBC 似乎给了我低质量的图像。

从外观上看，这个很酷的服务就是这样做的，而且它是一个 CDN，所以它可以是服务器端的。

http://www.resrc.it/docs/

有谁知道他们是怎么做到的？或者我如何使用 asp.net 或 javascript 或社区开源插件来做到这一点。

我认为https://github.com/yahoo/boomerang/可能有可能，但不确定这是它的真正目的。

4

6 回答 6

8

基本上你这样做：

  • 启动计时器
  • 通过 ajax 调用加载固定大小的文件，例如图像
  • 停止计时器
  • 取一些样本并计算平均 badwidth

像这样的东西可以工作：

//http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png
//Size = 238 KB
function measureBW(cnt, cb) {
    var start = new Date().getTime();
    var bandwidth;
    var i = 0;
    (function rec() {
        var xmlHttp = new XMLHttpRequest();
        xmlHttp.open('GET', 'http://upload.wikimedia.org/wikipedia/commons/5/51/Google.png', true);

        xmlHttp.onreadystatechange = function () {
            if (xmlHttp.readyState == 4) {
                var x = new Date().getTime() - start;
                bw = Number(((238 / (x / 1000))));
                bandwidth = ((bandwidth || bw) + bw) / 2;
                i++;
              if (i < cnt) {
                start = new Date().getTime();rec();
              }
                else cb(bandwidth.toFixed(0));
            }
        };
        xmlHttp.send(null);
    })();

}

measureBW(10, function (e) {
    console.log(e);
});

并非这不适var xmlHttp = new XMLHttpRequest();用于所有浏览器，您应该检查 UserAgent 并使用正确的

当然，它只是一个估计值。

这是一个JSBin示例

于 2012-12-21T10:47:34.117 回答
2
  1. 启动计时器。
  2. 向您的服务器发送一个 AJAX 请求，请求一个已知大小的文件。
  3. 当 AJAX 请求完成加载后，停止计时器，并根据经过的时间和文件大小计算带宽。

JavaScript 的问题是用户可以禁用它。（这在手机上更常见，较小的图像恰好更好）

于 2012-12-21T10:13:04.000 回答
2

我已经根据时间图像下载来解决这个问题（参考： http ://www.ehow.com/how_5804819_detect-connection-speed-javascript.html ）

警告的话：

它说我的速度是1.81Mbps ,

但根据 SpeedTest.Net 我的速度是这样的：

在此处输入图像描述

下载时间的逻辑似乎是正确的，但不确定它是否准确？

于 2012-12-21T10:51:31.580 回答
1

好吧，就像我在评论中所说的那样，您可以选择两种方法：

1）您在移动应用程序的上下文中，然后您可以直接查询设备使用的技术，以便您可以直接通知服务器您可以呈现的内容类型（和大小）。我认为 phone gap 可以帮助您使用 JavaScript 访问一些本机移动 API。

2）服务器定时器的事情。您可以自己“提供”一些文件，假设您的登录页面中有一个魔术文件，一旦客户端请求该文件，您就可以使用自定义处理程序获取此 HTTP 请求。您通过写入输出流来“手动”提供文件，并测量发送的字节数和到达 EOF 所需的时间，然后您可以以某种方式测量带宽。将此与会话 cookie 结合起来，您就可以在每个连接的浏览器中获得此信息。

于 2012-12-21T11:11:35.363 回答
0

虽然这不是一个答案，但重要的是要注意测量带宽并不总是可靠的。

http://www.smashingmagazine.com/2013/01/09/bandwidth-media-queries-we-dont-need-em/

套用上面的话：

...下载的位数除以下载它们所花费的时间...当您通过单个预热的 TCP 连接下载大文件时，这是正确的。这种情况很少见。典型的页面加载场景：

  1. 初始 HTML 页面是使用慢启动机制下载的，因此测量会大大低估可用带宽
  2. 加载 CSS 和 JavaScript 外部资源——新 TCP 连接的集合，都处于慢启动阶段，它们不一定都指向同一个目标服务器
  3. 加载图像——多个连接，每个连接下载一个资源。问题是这些连接并不总是处于其生命周期的同一阶段。有些可能处于缓慢启动阶段；有些人可能已经丢包，因此减少了他们的窗口和他们试图填充的带宽；有些可能是热身的 TCP 连接，准备填满带宽。这些 TCP 连接不一定都到同一个目标服务器，并且到各个目标服务器的带宽可能彼此不同。

因此，估计带宽是可能的，但它远非简单，而且它仅适用于页面加载过程的某些阶段。而且因为有多个 TCP 连接到不同的目标服务器是很常见的（例如，一个 CDN 可以托管一个网页的图像资源），我们无法真正确定我们想要测量的带宽是多少。

由于这是一个较老的问题，文章末尾的替代建议是考虑响应式图像的更新srcset属性，它让浏览器根据它所知道的（应该比我们更多）来决定加载哪个资产。听起来它更倾向于确定分辨率，但随着支持的增加，它可能会变得更聪明。

于 2014-11-04T15:10:58.003 回答
0

我发布了BwCh，它是一个开源 JavaScript API，用于检测基于 Web 的环境的带宽

它是用 ES2015 构建的。它使用了一些最新的 JavaScript 创新（截至 2016 年 4 月，Chrome 48+ for Android 目前支持window.navigator.connection），以便提供一种灵活的方法来检测移动和桌面设备的带宽。它回退/补充图像预加载以检测那些最新 API 不可用的带宽。

于 2016-04-07T11:04:26.523 回答