JS определяет пропускную способность сети

сервер GitHub

В последнее время возникла необходимость определить пропускную способность сети в проекте.Много решений нашел в интернете.Следующий Wang Er сделает сортировку.

1. Способ 1

Первая идеяЗагрузить картинку, рассчитать пропускную способность сети по времени загрузки и размеру картинки

С этой идеей мы можем обратиться к следующему коду (частично из githubdebloper/bandwidth.js):

function measureBW(fn) {
    var startTime, endTime, fileSize;

    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = () => {
        if(xhr.readyState === 2){
            startTime = Date.now();
        }
        if (xhr.readyState === 4 && xhr.status === 200) {
            endTime = Date.now();
            fileSize = xhr.responseText.length;
            var speed = fileSize  / ((endTime - startTime)/1000) / 1024;
            fn && fn(Math.floor(speed))
        }
    }

    xhr.open("GET", "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png", true);
    xhr.send();
}

measureBW((speed)=>{
    console.log(speed + " KB/sec");  //215 KB/sec
})

2. Способ 2

Однако, учитывая, что HTTP-запрос должен установить соединение и дождаться ответа, эти процессы также потребуют некоторого времени, поэтому описанный выше метод может не точно определить пропускную способность сети.

Мы можем делать несколько запросов одновременно, чтобы уменьшить влияние HTTP-запросов, устанавливающих соединение и ожидающих ответа. См. следующий код:

function measureBW(fn,time) {
    time = time || 1;
    var startTime, endTime, fileSize;
    var count = time ;
    var _this = this;
    function measureBWSimple () {
        
        var xhr = new XMLHttpRequest();

        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                if(!fileSize){
                    fileSize = xhr.responseText.length;
                }
                count --;
                if(count<=0){
                    endTime = Date.now();
                    var speed = fileSize * time  / ((endTime - startTime)/1000) / 1024;
                    fn && fn(Math.floor(speed));
                }
            }
        }
        xhr.open("GET", "https://upload.wikimedia.org/wikipedia/commons/5/51/Google.png", true);
        xhr.send();
    }
    startTime = Date.now();
    for(var x = time;x>0;x--){
        measureBWSimple()
    }
}

measureBW((speed)=>{
    console.log(speed + " KB/sec");  //913 KB/sec
},10)

Согласно тесту Ван Эра, результаты, полученные вторым методом, значительно выше результатов, полученных первым методом.

По сути, первые два дополнительно задают в заголовке http-запроса запрет на использование локального кеша (в разработке и тестировании, можно нажать Disable Cache под панелью Console Network), иначе изображение не будет загружено на сервер после его загрузки. загружается один раз, естественно Пропускную способность сети измерить невозможно.

3. Способ третий

существуетChrome65+, добавляет некоторые собственные методы для обнаружения информации о соединении, которое устройство использует для связи с сетью.

Ссылаясь на следующий код, мы можем определить пропускную способность сети:

function measureBW () {
    return navigator.connection.downlink;
}
measureBW() ;

navigator.connection.downlinkвозвращает оценку эффективной пропускной способности в (Мбит/с) (см.MDN), который отличается от нашего обычно используемого (КБ/сек), поэтому нам нужно снова выполнить преобразование единиц измерения, обратитесь к следующему коду:

function measureBW () {
    return navigator.connection.downlink * 1024 /8;   //单位为KB/sec
}
measureBW() ;

Мы также можем пройтиnavigator.connectionВверхchangeСобытия для прослушивания изменений пропускной способности сети:

navigator.connection.addEventListener('change', measureBW());

Справочная статья:

MDN NetworkInformation

Network Information API Sample

Кбит/с, КБ, Мбит/с конвертация единиц измерения

Оригинальный адрес:

Личный сайт Ван Юлюэ

Категории