食用方法
使用 Chrome 浏览器打开 B 站任意网址,打开 开发者工具 -> console,粘贴下面的代码回车运行:
( 不方便复制的可以去 Github Gist 查看:https://gist.github.com/maicong/cd2744f8990530407d9b1cb3caefb330 )
((url, delay) => { let starTime = new Date().getTime(), endTime; let xhr = new XMLHttpRequest(); let times = []; let style = document.createElement('style'); style.textContent = 'body { display: flex; flex-wrap: wrap; } div { text-align: center; padding: 0.5rem; margin: 1rem; border: 1px solid #ddd; }'; document.head.appendChild(style); document.body.innerHTML = ''; xhr.open('GET', url, true); xhr.onload = event => { if (xhr.status >= 200 && xhr.status < 400) { console.debug(`资源已加载,耗时 ${new Date().getTime() - starTime} ms,开始获取...`); (loadImg = (i, srcs) => { (promise = (src, title, timeStamp) => new Promise(resolve => { let img = new Image(); let div = document.createElement('div'); let p = document.createElement('p'); p.textContent = title; img.src = src; img.alt = title; img.onload = newEvent => { setTimeout(() => { let usedTime = newEvent.timeStamp - timeStamp; usedTime = Math.floor(i > 0 ? usedTime - delay : usedTime); times.push(usedTime); console.info(`第 ${i + 1} 张获取成功,耗时 ${usedTime} ms`, img.src); div.appendChild(img); div.appendChild(p); document.body.appendChild(div); resolve(newEvent.timeStamp); }, delay); }; img.onerror = err => { console.warn(`第 ${i + 1} 张获取失败`, img.src); resolve(err.timeStamp); }; }).then(timeStamp => { if (i === srcs.length - 1) { let min = Math.min.apply(null, times); let max = Math.max.apply(null, times); let avg = (times.reduce((p, c) => Number(p) + Number(c)) / times.length).toFixed(0); console.debug(`图片下载完毕,最快用时 ${min} ms,最慢用时 ${max} ms,平均用时 ${avg} ms`); } else { i += 1; promise(srcs[i].icon, srcs[i].title, timeStamp); } }))(srcs[i].icon, srcs[i].title, event.timeStamp); })(0, (JSON.parse(xhr.responseText)).fix); } }; xhr.send(); })('https://www.bilibili.com/index/index-icon.json', 100);
无图无真相
效果图
来自:麦田一根葱