你的网速有多快？

你的网速有多快？让我们用JavaScript来测试一下。

视觉学习者？这里有视频教程。

在本文中，我们已经了解到图像的作用远不止于显示图形。现在，在本教程中，我们将再次使用图像来了解互联网的下载速度。

如果你点击这个，我会收到通知😈

Shuvo ・ 21年10月19日

在本文中，他了解到，如果一个网站上有一张图片，浏览器会向图片 src 中的 URL 发送一个 http 请求，然后服务器会返回一个图片文件，最终显示给我们。显然，服务器发送文件需要一些时间。那么，如果我们已经知道图片的大小呢？那么，如果我们知道图片发送所需的时间，我们就可以进行一些计算，从而计算出互联网的下载速度。

那么您可以做什么呢？首先选择您想要的任何图像。然后找出该图像的大小。现在让我们将其上传到我们的服务器。您可以使用任何免费托管，例如Github。到目前为止一切都很好。现在我们在服务器中托管了一个已知大小的图像。现在我们需要找出服务器向我们发送图像需要多长时间。为此，我们将在 JavaScript 中使用Image对象。基本上，我们可以在代码开始执行时获取当前时间，并在图像加载后再次获取当前时间。如果我们减去它们就可以知道图像加载花了多长时间。好的，让我们为此创建一个实用程序函数。

function imageLoadTime(src){
    return new Promise((resolve, reject) => {
        let image = new Image()
        image.src = src
        let startTime = Date.now()

        image.onload = function(){
            let endTime = Date.now()
            resolve(endTime - startTime)
        }

        image.onerror = function(err){
            reject(err)
        }
    })
}

imageLoadTime("https://raw.githubusercontent.com/0shuvo0/internet-speed-test/main/test.gif").then(loadTime => {
   console.log(`Image took ${loadTime}ms to load,`)
})

但是如果我们再次运行该函数，你可能会发现这次图片几乎没有加载时间。这是因为浏览器缓存了图片。由于我们尝试从同一个 URL 获取图片，浏览器只会向我们发送缓存的图片。为了避免这种情况，我们可以简单地在 URL 后附加一些随机且唯一的查询字符串。那就这样做吧。

function imageLoadTime(src){
    return new Promise((resolve, reject) => {
        let image = new Image()

        //appending random number as query string in the url
        image.src = src + "?" + parseInt(Math.random() * 10000)
        let startTime = Date.now()

        image.onload = function(){
            let endTime = Date.now()
            resolve(endTime - startTime)
        }

        image.onerror = function(err){
            reject(err)
        }
    })
}

现在我们知道了图片的大小、加载时间，缓存问题也解决了。太棒了！

现在我们可以进行一些计算来确定互联网的下载速度了。让我们创建一个函数来计算下载速度，并以 kbps（千比特每秒）为单位返回。

const imgURL = "https://raw.githubusercontent.com/0shuvo0/internet-speed-test/main/test.gif"
let imgSize = 1343591 //image size in bytes
imgSize *= 8 //converting image size in bytes to bits by multiplying by 8

function imageLoadTime(src){
    return new Promise((resolve, reject) => {
        let image = new Image()

        //appending random number as query string in the url
        image.src = src + "?" + parseInt(Math.random() * 10000)
        let startTime = Date.now()

        image.onload = function(){
            let endTime = Date.now()
            resolve(endTime - startTime)
        }

        image.onerror = function(err){
            reject(err)
        }
    })
}

async function getDownloadSpeed(src, size){
    let loadTime = await imageLoadTime(src)
    //Just in case the image was cached, we don't want load time to be 0
    //It would raise division by zero error
    if(loadTime < 1) loadTime = 1
    let speed_bps = size / loadTime
    let speed_kbps = speed_bps / 1024

    return speed_kbps
}

getDownloadSpeed(imgURL, imgSize).then(speed => {
    console.log(`Your download speed in ${speed}kb/s`)
}).catch(err => console.log(err))

现在我们终于可以用 JavaScript 来获取网速了😎。结果小数点后有太多位数了，所以我们可以这样修改return +speed_kbps.toFixed(2)：这样小数点后就只有两位了。

但为了使结果更准确，我们可以getDownloadSpeed多次运行该函数并取平均值。我们这样做吧。

完成的代码：

const imgURL = "https://raw.githubusercontent.com/0shuvo0/internet-speed-test/main/test.gif"
let imgSize = 1343591 //image size in bytes
imgSize *= 8 //converting image size in bytes to bits by multiplying by 8
//How many time the test should run
const TEST_COUNT = 30

function imageLoadTime(src){
    return new Promise((resolve, reject) => {
        let image = new Image()

        //appending random number as query string in the url
        image.src = src + "?" + parseInt(Math.random() * 10000)
        let startTime = Date.now()

        image.onload = function(){
            let endTime = Date.now()
            resolve(endTime - startTime)
        }

        image.onerror = function(err){
            reject(err)
        }
    })
}

async function getDownloadSpeed(src, size){
    let loadTime = await imageLoadTime(src)
    //Just in case the image was cached, we don't want load time to be 0
    //It would raise division by zero error
    if(loadTime < 1) loadTime = 1
    let speed_bps = size / loadTime
    let speed_kbps = speed_bps / 1024

    return +speed_kbps.toFixed(2)
}

async function run(){
   let test_results = []

   for(let i = 0; i < TEST_COUNT; i++){
        let speed = await getDownloadSpeed(imgURL, imgSize)   
        test_results.push(speed)
        console.log(`${i + 1} out of ${TEST_COUNT} test ran!`)
    }

    //getting the average download speed
    let sum = test_results.reduce((a, b) => a + b, 0)
    let result = sum / test_results.length

    console.log("All test finished!!!")
    console.log(`Your download speed is ${result.toFixed(2)}kb/s`)
}

run()