最近好久没有记录问题了，因为最近都没有写代码
这不偶然遇到旭哥问我弱网情况下判断弱网图片加载慢 从而执行弱网逻辑问题
img的onload 以及轮询img.complete我感觉都不能很好的判断是否为弱网，因为你轮询complete即使发现他的complete为true并且记录了加载时间或者为false的时间超过一个常量从而进行 判断是弱网感觉都很麻烦呢
为什么不能直接检测网速 测试出结果后 再去进行弱网操作呢？
于是上网百度一番js网络监控的方法 这里搬运一下 做一个记录
贴几个认为有用的代码图
ajax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!doctype html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>js实现的网速测试方法</title>
</head>
<body>
<script>
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;
console.log(fileSize);
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?id=" + Math.random(), true);
xhr.send();
}
measureBW((speed)=>{
document.write("<div id='div1'>"+speed + " KB/s</div>");
console.log(speed + " KB/s"); //215 KB/sec
})
</script>
</body>
</html>
同样，考虑到http请求需要建立连接，以及等待响应，这些过程也会消耗一些时间，所以以上的方法可能不会准确的检测出网络带宽。
我们可以同时发出多次请求，来减少http请求建立连接，等待响应的影响，参考如下代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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?" + Math.random(), 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)
-API类
还有一个：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
document.write('<div id="msg">正在测试网络延迟，请稍后...</div>');
document.write('<a href="#">电信网路</a> <span class="classtime" xl-name="电信网路"></span><br>');
document.write('<a href="#">联通网路</a> <span class="classtime" xl-name="联通网路"></span>');
var jump=1,t={},autourl=new Array(),autoname=[];
autourl[1]="http://image.baidu.com/"; //这个是电信服务器站点
autourl[2]="https://www.baidu.com/"; //这个是联通服务器站点
autoname[1]="电信网路";
autoname[2]="联通网路";
(function(){
for(var i=1;i<autourl.length;i++){
var img = new Image;
//img.onerror= auto(autourl[i]);
img.onerror= (function(j){
return function(){
t[autourl[j]] =(new Date())- t[autourl[j]]; //记入时间差
console.log(autourl[j] + " ：" + t[autourl[j]] + "ms"); //console.log(t[url] + "ms");
document.querySelector('[xl-name="'+autoname[j]+'"]').innerHTML = t[autourl[j]] + ' ms';
console.log(jump);
if(jump) {
jump=0;
document.getElementById("msg").innerText = '3秒后进入【' + autoname[j] + '】';
//setTimeout(function(){top.location=url;},3000); //setTimeout("top.location='" + url + "';",3000); //3s 即3000ms
setTimeout(function(){window.location.replace(autourl[j]);},3000);
}
}
})(i);
//闭包传值
img.src = autourl[i] + Math.random();
t[autourl[i]] = (+new Date());//记录开始载入时间
}
})();
