어떻게 JavaScipt로 네트워크 속도를 측정합니까

앞말

그렇습니다. 최근에 현재 네트워크 속도를 판단하여 전방 제어 범위에서 단계별로 대형 파일을 요청하는 라이브러리를 작성하려고 했습니다.이 동동 나는 지금 한 줄의 코드도 아직 쓰지 않았는데, 갑자기 이 수요의 사고방식이 좀 실제적이지 않다는 것을 발견한 것 외에 또 다른 원인은 내가 갑자기 자신에게 물었기 때문이다. 전단에서 인터넷 속도를 어떻게 판단해야 하는가??!

전단 판단 네트워크 속도의 원리 총결

(주: 아래 구할 네트워크 속도 단위는 기본적으로 KB/S) 관련 자료를 보면 다음과 같은 몇 가지로 나눌 수 있습니다.

1. img를 통해 Ajax 요청을 로드하거나 실행하여 네트워크 속도를 계산합니다.

서비스 측과 같은 도메인의 파일, 예를 들어 그림 등을 요청함으로써 전방에서 요청을 시작하고 응답을 받는 두 시점은 각각 Date를 통과합니다.now는 날짜 때문에 start와 end를 표시합니다.now는 1970년 1월 1일(UTC)에서 현재 시간이 지나간 밀리초의 수를 나타낸다. 그래서 우리는 end-start를 통해 시간차(ms)를 구하고 계산을 통해
파일 크기(KB)* 1000/(end -start)
네트워크 속도를 계산할 수 있습니다(KB/S).
요청 파일은 img로 로드하거나 AJAX로 로드하는 두 가지 방법이 있습니다.

img 대상을 만들고 onload 감청 리셋을 설정한 다음에 src를 지정합니다. src를 지정하면 이미지 자원이 불러옵니다. 완성되면 onload 리셋이 호출됩니다. 우리는 시기에 따라 start와end를 표시할 수 있습니다

AJAX를 통해 요청, 즉 XHR 대상을 만들고 onreadystatechange 리셋에서readystate=4시에 불러오기가 완료되면 시기에 따라 start와end를 표시한다고 판단합니다..

2.window.navigator.connection.downlink 네트워크 속도 조회

우리는 또한 일부 H5의 선진 API를 통해 실현할 수 있다. 예를 들어 여기서 우리가 사용할 수 있는 것은 윈도우이다.navigator.connection.downlink에서 조회를 합니다. 그러나 알다시피 이런 API는 모두 덕성, 즉 흔히 말하는 호환성 문제입니다. 그래서 우리는 일반적으로 예비 수단으로 능력 검사를 통해 사용할 수 있으면 사용하고 사용할 수 없으면 다른 방법을 통과합니다.그리고 downlink의 단위는 mbps이고 KB/S로 바뀌는 공식은
navigator.connection.downlink * 1024/8
1024를 타면 이해할 수 있는데 왜 뒤에 8을 빼야 합니까?이것은 mbps의 b는bit(비트)를 가리키고, KB/s의 B는Byte(바이트), 1바이트(b)=8비트(bit)를 가리키기 때문에 8개를 제외해야 한다

3. 일반적으로 요청 파일을 통해 네트워크 속도를 측정한다

한 번에 오차가 있을 수 있기 때문에 우리는 여러 번 요청하고 균일치를 계산할 수 있다.

전단에서 네트워크 속도를 판단하는 방법과 그 장단점

img부하측정속도:img대상부하측정망속도.장점: 크로스오버로 인한 문제가 없습니다.단점: (1) 파일 크기를 측정하고 매개 변수 fileSize를 제공하려면 (2) 파일은 그림(3) 파일 크기를 유연하게 제어할 수 없습니다

Ajax 속도 측정: Ajax를 통해 네트워크 속도를 측정한다.장점: (1) 파일 크기 파라미터를 제공하지 않아도 됩니다.response에서 테스트를 받을 수 있는 파일은 반드시 그림이 아니라 데이터의 양을 유연하게 제어할 수 있기 때문입니다.단점: 크로스 필드 문제

downlink 속도 측정:navigator를 통해.connection.downlink 읽기 네트워크 속도.장점: 매개 변수가 필요하지 않습니다.단점: 1.호환성에 문제가 있습니다. 2.대역폭 조회는 실시간으로 이루어지지 않으며 분 간격이 있습니다

종합 실현: 먼저 downlink로 속도를 측정해 보십시오. 그렇지 않으면 여러 번 AJAX로 속도를 측정하고 평균치를 구합니다

img 로드 속도 측정

function getSpeedWithImg(imgUrl, fileSize) {
    return new Promise((resolve, reject) => {
        let start = null;
        let end = null;
        let img = document.createElement('img');
        start = new Date().getTime();
        img.onload = function (e) {
            end = new Date().getTime();
            const speed = fileSize * 1000 / (end - start)
            resolve(speed);
        }
        img.src = imgUrl;
    }).catch(err => { throw err });
}

Ajax 속도 측정

function getSpeedWithAjax(url) {
    return new Promise((resolve, reject) => {
        let start = null;
        let end = null;
        start = new Date().getTime();
        const xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                end = new Date().getTime();
                const size = xhr.getResponseHeader('Content-Length') / 1024;
                const speed = size * 1000 / (end - start)
                resolve(speed);
            }
        }
        xhr.open('GET', url);
        xhr.send();
    }).catch(err => { throw err });
}

downlink 속도 측정

function getSpeedWithDnlink() {
    // downlink 
    const connection = window.navigator.connection;
    if (connection && connection.downlink) {
        return connection.downlink * 1024 / 8;
    }
}

종합 속도 측정

function getNetSpeed(url, times) {
    // downlink 
    const connection = window.navigator.connection;
    if (connection && connection.downlink) {
        return connection.downlink * 1024 / 8;
    }
    //  
    const arr = [];
    for (let i = 0; i < times; i++) {
        arr.push(getSpeedWithAjax(url));
    }
    return Promise.all(arr).then(speeds => {
        let sum = 0;
        speeds.forEach(speed => {
            sum += speed;
        });
        return sum / times;
    })
}

이상 코드는 npm 패키지를 보내서 다운로드할 수 있습니다

npm i network-speed-test

사용법

import * from 'network-speed-test';
getSpeedWithImg("https://s2.ax1x.com/2019/08/13/mPJ2iq.jpg", 8.97).then(
    speed => {
        console.log(speed);
    }
)

getSpeedWithAjax('./speed.jpg').then(speed => {
    console.log(speed);
});

getNetSpeed('./speed.jpg', 3).then(speed => {
    console.log(speed);
});

getSpeedWithDnlink();

npm 패키지 주소

https://www.npmjs.com/package/network-speed-test

Github 주소

https://github.com/penghuwan/network-speed-test
이상은 자바스크립트로 네트워크 속도를 측정하는 방법에 대한 상세한 내용입니다. 자바스크립트로 네트워크 속도를 측정하는 것에 대한 더 많은 자료는 저희 다른 관련 글을 주목해 주십시오!