Question

我看过很多问题没有回答这个问题，是否可以使用java脚本检查某些带宽并根据它加载特定内容？

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

通过这个很酷的服务看起来这个和它的CDN所以它可以是服务器端。

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

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

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

Answer 1

基本上你这样做是这样的：

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

像这样的某些东西可以起作用：

//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示例

Answer 2

启动计时器。
向您的服务器发送AJAX请求，请求已知大小的文件。
当AJAX请求完成加载时，停止计时器，并根据传递的时间和文件大小计算带宽。

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

Answer 3

我根据时间图像下载敲了this up（参考：http://www.ehow.com/how_5804819_detect-connection-speed-javascript.html）

警告语：

它说我的速度 1.81Mbps ，

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

enter image description here

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

Answer 4

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

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

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

Answer 5

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

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

用上述内容来解释：

...下载的位数除以下载它们的时间...当您通过单个预热的TCP连接下载大型文件时，这是真的。这种情况很少发生。   典型的页面加载方案：


使用慢启动机制下载初始HTML页面，因此测量将显着低估可用带宽

加载CSS和JavaScript外部资源 - 一组新的TCP连接，所有这些都处于慢启动阶段，并且它们不一定都是同一个目标服务器

加载图像 - 多个连接，每个连接下载一个资源。问题是这些连接并不总是处于生命周期的同一阶段。有些人可能处于慢启动阶段;有些人可能遭受了数据包丢失，从而减少了他们试图填充的窗口和带宽;有些可能是预热的TCP连接，准备填补带宽。这些TCP连接不一定都是同一个目标服务器，并且各个目标服务器之间的带宽可能彼此不同。

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

由于这是一个较旧的问题，本文末尾的另一个建议是考虑更新的srcset attribute响应式图像，它允许浏览器根据其知道的内容决定加载哪个资产（哪个应该比我们更多）。听起来像it's weighted more towards just determining resolution，但随着支持的增加，它可能变得更聪明。

Answer 6

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

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

检查某人的带宽并根据它加载内容

6 个答案: