栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

如何在JavaScript中检测互联网速度?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

如何在JavaScript中检测互联网速度?

可能在某种程度上但不是很准确,其想法是加载具有已知文件大小的图像,然后在其

onload
事件中测量触发该事件之前经过的时间,然后将此时间除以图像文件大小。

可以在这里找到示例:使用javascript计算速度

应用了建议的修复的测试用例:

//JUST AN EXAMPLE, PLEASE USE YOUR OWN PICTURE!var imageAddr = "http://www.kenrockwell.com/contax/images/g2/examples/31120037-5mb.jpg";var downloadSize = 4995374; //bytesfunction ShowProgressMessage(msg) {    if (console) {        if (typeof msg == "string") { console.log(msg);        } else { for (var i = 0; i < msg.length; i++) {     console.log(msg[i]); }        }    }    var oProgress = document.getElementById("progress");    if (oProgress) {        var actualHTML = (typeof msg == "string") ? msg : msg.join("<br />");        oProgress.innerHTML = actualHTML;    }}function InitiateSpeedDetection() {    ShowProgressMessage("Loading the image, please wait...");    window.setTimeout(MeasureConnectionSpeed, 1);};if (window.addEventListener) {    window.addEventListener('load', InitiateSpeedDetection, false);} else if (window.attachEvent) {    window.attachEvent('onload', InitiateSpeedDetection);}function MeasureConnectionSpeed() {    var startTime, endTime;    var download = new Image();    download.onload = function () {        endTime = (new Date()).getTime();        showResults();    }    download.onerror = function (err, msg) {        ShowProgressMessage("Invalid image, or error downloading");    }    startTime = (new Date()).getTime();    var cacheBuster = "?nnn=" + startTime;    download.src = imageAddr + cacheBuster;    function showResults() {        var duration = (endTime - startTime) / 1000;        var bitsLoaded = downloadSize * 8;        var speedBps = (bitsLoaded / duration).toFixed(2);        var speedKbps = (speedBps / 1024).toFixed(2);        var speedMbps = (speedKbps / 1024).toFixed(2);        ShowProgressMessage([ "Your connection speed is:", speedBps + " bps", speedKbps + " kbps", speedMbps + " Mbps"        ]);    }}<h1 id="progress">Javascript is turned off, or your browser is realllllly slow</h1>

与“真实”速度测试服务快速比较显示,使用大尺寸图像时,相差0.12 Mbps。

为了确保测试的完整性,您可以在启用Chrome开发者工具限制的情况下运行代码,然后查看结果是否符合限制。 (贷记给user284130)

要记住的重要事项:

  1. 使用的图像应适当优化和压缩。如果不是,则Web服务器对连接的默认压缩可能会显示比实际更大的速度。另一种选择是使用不可压缩的文件格式,例如jpg。

  2. 上述缓存无效化机制可能不适用于某些CDN服务器,可以将其配置为忽略查询字符串参数,从而更好地在映像本身上设置缓存控制标头。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/415915.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号