在最近的工作中，其中一个内容就是了解当前用户的网络情况，以便采取相应的展示策略。这段内容是我以前没有研究过的，所以正好趁着这个机会了解一下。那么我们可以做些什么来获取用户的网速呢？以下是已经研究过的几种方法。1、通过window.navigator.connectionAPI获取网速在Chrome浏览器中，我们可以使用window.navigator.connectionAPI中的downlink属性获取实时网速：根据MDN文档，downlink属性是测量inpersecond返回以兆位为单位的有效带宽估计。例如，当downlink的值为5.0时，理论下载速度可能为5Mb/s。遗憾的是，这个API还处于实验阶段，部分功能在iOS或Safari上无法使用，我们需要另辟蹊径来测试网速。2、部署服务，通过请求接口获取网速。这也是一些测速网站的通行做法，比如本爱测速。请求部署在其服务器上的几个接口/cesu/index/garbage/cesu/index/empty/cesu/index/ip，分别获取下载速度、上传速度、网络延迟、网络抖动等数据。我们可以通过阅读它的速度测试代码speedtest_worker.min.js来了解一下。简单来说，就是通过构造不同的XHR对象来请求接口，记录起止时间，最后转化为具体的数据。这种部署服务的方式比较主流，但是实现成本比较高。另外需要注意的是，如果接口down了，可能会走上error的逻辑，会误判为用户网络中断。3.获取静态图片资源这是一种低成本且非常普遍的做法。我们可以让浏览器通过GET请求获取给定大小的图片，分析获取图片所需的时间，然后换算成实际的下载速度。这种方式比第一节的window.navigator.connection.downlink数据更准确，因为API只是一个理论值，实际值需要实际下载资源才能获取。附上实现代码，可以看出这个方案确实是最省钱的：src=`url?_t=${Math.random()}`//添加时间戳以避免浏览器只发出一次请求conststartTime=newDate()img.onload=function(){constfileSize=size//单位是kbconstendTime=newDate()constcostTime=endTime-startTimeconstspeed=fileSize/(endTime-startTime)*1000//单位是kb/sresolve({speed,costTime})}img.onerror=reject})}我们在浏览器中取这张146kb的图片https://raw.githubusercontent.com/jrainlau/imghost/master/29e9103b4a6801aa42f8f08ef65ad51c%20(1).ytuxq1kbb4f.png试试看：耗时输出和网络面板是基本一致，计算出的下载速度也与上一节得到的数据基本一致，可以断定这种方法是可靠的。（超过）
