<!doctype html>

<html>

<head>

<meta http-equiv=Content-Type content="text/html;charset=utf-8">

<title>js实现的网速测试方法</title>

</head>

<body>

<script>

function testBW(fn) {

    var startTime, endTime, fileSize;

    var xhr = new XMLHttpRequest();

	xhr.timeout=30000;

	xhr.onerror=function (){

	    console.log('onerror');

	}

    xhr.onreadystatechange =function(){

	 　　console.log(JSON.stringify(xhr));

        if(xhr.readyState === 2){

            startTime = Date.now();

        }

        if (xhr.readyState === 4) {

            endTime = Date.now();

			console.log(xhr.readyState+'=='+xhr.responseText.length);

            fileSize = xhr.responseText.length;

            console.log(fileSize);

            var speed = fileSize  / ((endTime - startTime)/1000) / 1024;

            fn && fn(Math.floor(speed)||0)

			console.log('complete');

        }

		if(xhr.status === 200) {

            endTime = Date.now();

			console.log(xhr.readyState+'=='+xhr.responseText.length);

            fileSize = xhr.responseText.length;

            console.log(fileSize);

            var speed = fileSize  / ((endTime - startTime)/1000) / 1024;

            fn && fn(Math.floor(speed)||0)

        }

    }

	//http://wangsu3s.acc5.com/ping.jpg

	//http://alyun3s.acc5.com/ping.jpg

	//http://app-static.acc5.com/app/ping.gif

    xhr.open("GET", "http://app-static.acc5.com/app/ping.gif?rnd=" + Math.random(), true);

    xhr.send();

}

function callback(speed){

    document.write("<div id='div1'>"+speed + " KB/s</div>");

    console.log(speed + " KB/s");  //215 KB/sec

}

testBW(callback);

</script>

</body>

</html>

　　

js 检测客户端网速的更多相关文章

  1. JS 检测客户端断网情况

    常用方法 1 navigator.onLine 2 window.addEventListener() 3 获取网络资源 4 ajax请求 1. navigator.onLine 只会在机器未连上路由 ...

  2. js检测客户端是否安装

    前言 需求背景:一个web下载页面,需要检测pc是否安装了客户端软件(windows软件).网页上有一个打开客户端按钮.若安装了客户端软件,则直接打开,否则下载软件.支持web下载页面在iframe下 ...

  3. 2.1 实践篇：使用ping来检测网速

    1. Windows功能键+R ,打开cmd窗口 2. ping -n 200 www.baidu.com #ping网站www.baidu.com ,连续200次.验证连接. 可以ctrl+C 强制 ...

  4. 提升网速的路由器优化方法（UPnP、QoS、MTU、交换机模式、无线中继）

    在上一篇<为什么房间的 Wi-Fi 信号这么差>中,猫哥从微波炉.相对论.人存原理出发,介绍了影响 Wi-Fi 信号强弱的几大因素,接下来猫哥再给大家介绍几种不用升级带宽套餐也能提升网速的 ...

  5. JS判断客户端是否是iOS或者Android或者ipad（三）

     *  * @function: 判断浏览器类型是否是Safari.Firefox.ie.chrome浏览器  * @return: true或false  *  */ function isSafa ...

  6. H5案例分享：使用JS判断客户端、浏览器、操作系统类型

    使用JS判断客户端.浏览器.操作系统类型 一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...

  7. Fiddler-010-网络延时应用小技巧-模拟低网速环境

    在日常的网络测试中,经常需要测试网络超时或在网络传输速率不佳的情况的应用场景,而与此同时我们有时手边资源有限,实现在各种真实网络(2G\3G)环境下测试有些局限性.其实 fiddler 已经提供了类似 ...

  8. Linux下使用Speedtest测试网速

    导读 Speedtest是用来测试网络性能的开源软件,在Linux下面安装Speedtest可以用来测试网络出口的上传和下载速度,帮助排查网络方面导致的故障. Speedtest介绍 由于公司几个项目 ...

  9. 基于gulp编写的一个简单实用的前端开发环境好了，安装完Gulp后，接下来是你大展身手的时候了，在你自己的电脑上面随便哪个地方建一个目录，打开命令行，然后进入创建好的目录里面，开始撸代码,关于生成的json文件请点击这里https://docs.npmjs.com/files/package.json，打开的速度看你的网速了注意:以下是为了演示 ，我建的一个目录结构，你自己可以根据项目需求自己建目

    自从Node.js出现以来,基于其的前端开发的工具框架也越来越多了,从Grunt到Gulp再到现在很火的WebPack,所有的这些新的东西的出现都极大的解放了我们在前端领域的开发,作为一个在前端领域里 ...

随机推荐

  1. 转 C++的常量引用

    C++的常量引用 如果是对一个常量进行引用,则编译器首先建立一个临时变量,然后将该常量的值置入临时变量中,对该引用的操作就是对该临时变量的操作.对常量的引用可以用其它任何引用来初始化:但不能改变. 关 ...

  2. Scrapy学习-24-集成elasticsearch

    elasticsearch简单集成到scrapy中 使用elasticsearch的python接口处理数据  https://github.com/elastic/elasticsearch-dsl ...

  3. 更新到xcode10以后出现几个无奈的问题，谨已此篇告诫广大ioser升级请慎重

    1.第一次用xcode 10 archive的时候遇到的电脑卡死不动的问题,期间鼠标键盘通通都动不了,只能强制关机来解决,于是又进行了一次可还是遇到相同的问题,无奈之下只能等待,大约20分钟左右(20 ...

  4. Android开发 大坑Fragment

    是不是弄了半天你的Fragment老是Replace不了,我的原因是:弄成静 态的,然后要动态Replace,竟然不行,后来框个FragmentLayout,改成全动态添加和Replace,OK了.

  5. (6)centos安装和解压

    一.rpm包安装方式步骤:1.找到相应的软件包,比如soft.version.rpm,下载到本机某个目录:2.打开一个终端,su -成root用户:3.cd soft.version.rpm所在的目录 ...

  6. 51nod 1105 第K大的数 【双重二分/二分套二分/两数组任意乘积后第K大数】

    1105 第K大的数  基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题  收藏  关注 数组A和数组B,里面都有n个整数.数组C共有n^2个整数,分别是A[0] * ...

  7. Path特效之PathMeasure打造万能路径动效

    前面两篇文章主要讲解了 Path 的概念和基本使用,今天我们一起利用 Path 做个比较实用的小例子: 上一篇我们使用 Path 绘制了一个小桃心,我们这一篇继续围绕着这个小桃心进行展开: ----- ...

  8. JSON API：用 JSON 构建 API 的标准指南中文版

    译文地址:https://github.com/justjavac/json-api-zh_CN 假设你和你的团队以前争论过使用什么方式构建合理 JSON 响应格式, 那么 JSON API 就是你的 ...

  9. AngularJS中选择样式

    代码下载:https://files.cnblogs.com/files/xiandedanteng/angularJSSelectClass.rar 要点,{{ctrl.name}}比<spa ...

  10. Micro:Bit手柄试用之一MagicPad (解决蓝牙与gamePad包共存)

    前言 原创文章,转载引用务必注明链接.由于本人初次接触Micro:Bit,水平有限,如有疏漏,欢迎指正. Micro:Bit真好玩! DFRobot的论坛相关资料算是国内比较丰富的了,个人感觉MB比A ...