首页 › JavaScript论坛 › 【JavaScript】当我们尝试用JavaScipt测网速

不要迷糊啦 發表於 2019-8-17 08:53:00

【JavaScript】当我们尝试用JavaScipt测网速

<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2vm9f-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="2vm9f-0-0">npm包地址</span></h2>
<div class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-338e4905a2684ca96e08c7780fc68412_180x120.jpg" data-image-width="1200" data-image-height="630" data-offset-key="2t3om-0-0"><span class="LinkCard-backdrop" style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;"><span class="LinkCard-content"><span class="LinkCard-text"><span class="LinkCard-title" data-text="true"><span class="LinkCard-meta">https://www.npmjs.com/package/network-speed-test<br></span></span></span></span></span></div>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="eu9s9-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="eu9s9-0-0"> Github地址</span></h2>
<div class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-125b2f0e763f42d360a2a5c5fa2f81e2_ipico.jpg" data-image-width="272" data-image-height="272" data-offset-key="479t1-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;">https://github.com/penghuwan/network-speed-test</span></div>
<div class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-125b2f0e763f42d360a2a5c5fa2f81e2_ipico.jpg" data-image-width="272" data-image-height="272" data-offset-key="479t1-0-0">&nbsp;</div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="a4h26-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="a4h26-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="a4h26-0-0">事情是这样的，最近尝试写一个通过判断当前网速，从而在前端控制范围请求去分步请求一个大型文件的库。这个东东我现在一行代码都还没写，除了突然发现这个需求的思路有些不太实际之外，另一个原因是我突然问自己——</span></div>





</div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="25ci9-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="25ci9-0-0"><strong><span style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="25ci9-0-0">前端尼玛要怎么判断网速啊？? ? ！</span></strong></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="25ci9-0-0">&nbsp;</div>





</div>
<h2><span style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="92foq-0-0">前端判断网速的原理总结</span></h2>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="n6bj-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="n6bj-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="n6bj-0-0">(注：下面求的网速单位默认为<span data-offset-key="n6bj-0-1">KB/S<span data-offset-key="n6bj-0-2">)</span></span></span></div>





</div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="9mct6-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9mct6-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="9mct6-0-0">通过查阅相关资料，我发现思路主要是分为以下几种：</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9mct6-0-0">&nbsp;</div>





</div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="fnc0i-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fnc0i-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="fnc0i-0-0">1.通过img加载或者发起Ajax请求计算网速</span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fnc0i-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="fnc0i-0-0">通过请求一个和服务端同域的文件，例如图片等，在前端开始请求和收到响应两个时间点分别通过Date.now标记start和end，因为Date.now得出的是1970年1月1日(UTC)到当前时间经过的毫秒数,所以我们通过end - start求出时间差（ms），然后通过计算：</span></div>





</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ba6b1-0-0">
<div class="cnblogs_code">
<pre>文件大小（KB） * 1000 /( end -start )</pre>
</div>
<p><span style="font-family: &quot;Microsoft YaHei&quot;" data-offset-key="a098j-0-0">就可以计算出网速了(KB/S）。</span></p>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="2f588-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2f588-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="2f588-0-0">而请求文件又有两种方法：通过img加载或者AJAX加载：</span></div>
</div>
<ul class="public-DraftStyleDefault-ul" data-offset-key="bm64k-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="dtpjc" data-offset-key="bm64k-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bm64k-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="bm64k-0-0">通过创建img对象，设置onload监听回调，然后指定src, 一旦指定src,图片资源就会加载，完成时onload回调就会调用，我们可以根据时机分别标记start和end。</span></div>
</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="dtpjc" data-offset-key="3sjh1-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3sjh1-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="3sjh1-0-0">通过AJAX进行请求，即创建XHR对象，在onreadystatechange回调里，判断当readystate = 4时候加载完成，根据时机分别标记start和end。</span></div>
</li>
</ul>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="ckqja-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ckqja-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="ckqja-0-0">2.window.navigator.connection.downlink&nbsp;网速查询</span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ckqja-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="ckqja-0-0">我们还可以通过一些H5的先进API去实现，例如这里我们可以使用的是window.navigator.connection.downlink 去查询，但是正如你所知道的是，<span data-offset-key="ckqja-0-1">这类API都是一副德性，即老生常谈的兼容性问题<span data-offset-key="ckqja-0-2">，所以我们一般都是作为一种预备的手段，<span data-offset-key="ckqja-0-3">通过能力检测，能用就用它，不能用就通过别的方法。而且需要注意downlink的单位是mbps,转化成KB/S的公式是</span></span></span></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="d877c-0-0">
<div class="cnblogs_code">
<pre>navigator.connection.downlink * 1024 / 8</pre>
</div>
<span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="d877c-0-0"><span class="prism-token token punctuation"><span data-offset-key="d877c-2-0"><span class="prism-token token punctuation"><span data-offset-key="d877c-4-0"><span class="prism-token token operator"><span data-offset-key="d877c-5-0"><span data-text="true"><span data-offset-key="d877c-6-0"><span class="prism-token token number"><span data-offset-key="d877c-8-0"><span class="prism-token token operator"><span data-offset-key="d877c-9-0"><span data-text="true"><span data-offset-key="d877c-10-0"><span class="prism-token token number"><span class="prism-token token punctuation"><br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="6b6r0-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6b6r0-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="6b6r0-0-0"><strong>乘1024可以理解，为什么后面要除8呢？这是因为mbps里的b指的是bit(比特)，KB/s里面的B指的是Byte（字节），1字节(b)=8比特(bit)</strong>，所以需要除个8</span></div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="6b6r0-0-0">&nbsp;</div>





</div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="65ton-0-0">
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="65ton-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="65ton-0-0">3. 一般来说，通过请求文件测算网速，单次可能会有误差，所以我们可以请求多次并计算均值。</span></h3>
<p>&nbsp;</p>





</div>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="86ik3-0-0"><span style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="86ik3-0-0">前端判断网速的方法及其优缺点</span></h2>
<ul class="public-DraftStyleDefault-ul" data-offset-key="fdu6k-0-0">
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="dtpjc" data-offset-key="fdu6k-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="fdu6k-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="fdu6k-0-0">img加载测速<span data-offset-key="fdu6k-0-1">：借助img对象加载测算网速。优点：没有跨域带来的问题。缺点：(1)要自己测文件大小并提供参数fileSize,（2）文件必须为图片 （3）文件大小不能灵活控制</span></span></div>





</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="dtpjc" data-offset-key="5mra0-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5mra0-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="5mra0-0-0">Ajax测速<span data-offset-key="5mra0-0-1">： 通过Ajax测算网速。 优点： （1）不用提供文件大小参数，因为可以从response首部获得（2）测试的文件不一定要是图片,且数据量能灵活控制。缺点：跨域问题</span></span></div>





</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="dtpjc" data-offset-key="ettas-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="ettas-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="ettas-0-0">downlink测速<span data-offset-key="ettas-0-1">: 通过navigator.connection.downlink读取网速。优点：不需要任何参数。缺点：1.兼容性很有问题，2.带宽查询不是实时的,具有分钟级别的时间间隔</span></span></div>





</li>
<li class="Editable-styled public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR" data-block="true" data-editor="dtpjc" data-offset-key="2pfol-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2pfol-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="2pfol-0-0">综合实现<span data-offset-key="2pfol-0-1">：先尝试采用downlink测速，否则多次AJAX测速并求平均值</span></span></div>





</li>





</ul>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="121n1-0-0"><span style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="121n1-0-0">img加载测速</span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9plfv-0-0">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> getSpeedWithImg(imgUrl, fileSize) {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">new</span> Promise((resolve, reject) =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      let start </span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
      let end </span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
      let img </span>= document.createElement('img'<span style="color: rgba(0, 0, 0, 1)">);
      start </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date().getTime();
      img.onload </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> (e) {
            end </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date().getTime();
            const speed </span>= fileSize * 1000 / (end -<span style="color: rgba(0, 0, 0, 1)"> start)
            resolve(speed);
      }
      img.src </span>=<span style="color: rgba(0, 0, 0, 1)"> imgUrl;
    }).</span><span style="color: rgba(0, 0, 255, 1)">catch</span>(err =&gt; { <span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> err });
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="2tgvh-0-0"><span style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="2tgvh-0-0">Ajax测速</span></h3>
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> getSpeedWithAjax(url) {
    </span><span style="color: rgba(0, 0, 255, 1)">return</span> <span style="color: rgba(0, 0, 255, 1)">new</span> Promise((resolve, reject) =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      let start </span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
      let end </span>= <span style="color: rgba(0, 0, 255, 1)">null</span><span style="color: rgba(0, 0, 0, 1)">;
      start </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date().getTime();
      const xhr </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> XMLHttpRequest();
      xhr.onreadystatechange </span>= <span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> () {
            </span><span style="color: rgba(0, 0, 255, 1)">if</span> (xhr.readyState === 4<span style="color: rgba(0, 0, 0, 1)">) {
                end </span>= <span style="color: rgba(0, 0, 255, 1)">new</span><span style="color: rgba(0, 0, 0, 1)"> Date().getTime();
                const size </span>= xhr.getResponseHeader('Content-Length') / 1024<span style="color: rgba(0, 0, 0, 1)">;
                const speed </span>= size * 1000 / (end -<span style="color: rgba(0, 0, 0, 1)"> start)
                resolve(speed);
            }
      }
      xhr.open(</span>'GET'<span style="color: rgba(0, 0, 0, 1)">, url);
      xhr.send();
    }).</span><span style="color: rgba(0, 0, 255, 1)">catch</span>(err =&gt; { <span style="color: rgba(0, 0, 255, 1)">throw</span><span style="color: rgba(0, 0, 0, 1)"> err });
}</span></pre>
</div>
<p>&nbsp;</p>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="3qpbn-0-0"><span style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="3qpbn-0-0">downlink测速</span></h3>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="bsdke-0-0">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> getSpeedWithDnlink() {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> downlink测算网速</span>
    const connection =<span style="color: rgba(0, 0, 0, 1)"> window.navigator.connection;
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (connection &amp;&amp;<span style="color: rgba(0, 0, 0, 1)"> connection.downlink) {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> connection.downlink * 1024 / 8<span style="color: rgba(0, 0, 0, 1)">;
    }
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
<h3 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="81rpm-0-0"><span style="font-family: &quot;Microsoft YaHei&quot;" data-offset-key="81rpm-0-0">综合测速</span></h3>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="f55ff-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="f55ff-0-0">
<div class="cnblogs_code">
<pre><span style="color: rgba(0, 0, 255, 1)">function</span><span style="color: rgba(0, 0, 0, 1)"> getNetSpeed(url, times) {
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> downlink测算网速</span>
    const connection =<span style="color: rgba(0, 0, 0, 1)"> window.navigator.connection;
    </span><span style="color: rgba(0, 0, 255, 1)">if</span> (connection &amp;&amp;<span style="color: rgba(0, 0, 0, 1)"> connection.downlink) {
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> connection.downlink * 1024 / 8<span style="color: rgba(0, 0, 0, 1)">;
    }
    </span><span style="color: rgba(0, 128, 0, 1)">//</span><span style="color: rgba(0, 128, 0, 1)"> 多次测速求平均值</span>
    const arr =<span style="color: rgba(0, 0, 0, 1)"> [];
    </span><span style="color: rgba(0, 0, 255, 1)">for</span> (let i = 0; i &lt; times; i++<span style="color: rgba(0, 0, 0, 1)">) {
      arr.push(getSpeedWithAjax(url));
    }
    </span><span style="color: rgba(0, 0, 255, 1)">return</span> Promise.all(arr).then(speeds =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      let sum </span>= 0<span style="color: rgba(0, 0, 0, 1)">;
      speeds.forEach(speed </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
            sum </span>+=<span style="color: rgba(0, 0, 0, 1)"> speed;
      });
      </span><span style="color: rgba(0, 0, 255, 1)">return</span> sum /<span style="color: rgba(0, 0, 0, 1)"> times;
    })
}</span></pre>
</div>
<p>&nbsp;</p>
</div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="5r5oj-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5r5oj-0-0"><span style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="5r5oj-0-0">&nbsp;</span></div>
</div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="5rvr2-0-0">
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5rvr2-0-0"><span style="font-size: 16px"><strong><span style="font-family: &quot;Microsoft YaHei&quot;" data-offset-key="5rvr2-0-0">以上代码我发了一个npm包，可以通过下载</span></strong></span></div>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="9vspl-0-0">
<div class="cnblogs_code">
<pre>npm i network-speed-test</pre>
</div>
<p><span style="font-size: 16px"><strong><span style="font-family: &quot;Microsoft YaHei&quot;" data-offset-key="5cm4-0-0">使用方式</span></strong></span></p>
</div>
<div class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="5idhp-0-0">
<div class="cnblogs_code">
<pre>import * from 'network-speed-test'<span style="color: rgba(0, 0, 0, 1)">;
getSpeedWithImg(</span>"https://s2.ax1x.com/2019/08/13/mPJ2iq.jpg", 8.97<span style="color: rgba(0, 0, 0, 1)">).then(
    speed </span>=&gt;<span style="color: rgba(0, 0, 0, 1)"> {
      console.log(speed);
    }
)

getSpeedWithAjax(</span>'./speed.jpg').then(speed =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
    console.log(speed);
});

getNetSpeed(</span>'./speed.jpg', 3).then(speed =&gt;<span style="color: rgba(0, 0, 0, 1)"> {
    console.log(speed);
});

getSpeedWithDnlink();</span></pre>
</div>
<p>&nbsp;</p>
</div>
<h2 class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr" data-offset-key="26alo-0-0"><strong><span style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;" data-offset-key="26alo-0-0">Github地址</span></strong></h2>
<div class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-125b2f0e763f42d360a2a5c5fa2f81e2_ipico.jpg" data-image-width="272" data-image-height="272" data-offset-key="6e18q-0-0"><span class="LinkCard-backdrop" style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;"><span class="LinkCard-content"><span class="LinkCard-text"><span class="LinkCard-title" data-text="true">https://github.com/penghuwan/network-speed-test<br></span></span></span></span></div>
<div class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-125b2f0e763f42d360a2a5c5fa2f81e2_ipico.jpg" data-image-width="272" data-image-height="272" data-offset-key="6e18q-0-0">&nbsp;</div>
<h2 class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-125b2f0e763f42d360a2a5c5fa2f81e2_ipico.jpg" data-image-width="272" data-image-height="272" data-offset-key="6e18q-0-0"><span class="LinkCard-backdrop" style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;"><span class="LinkCard-content"><span class="LinkCard-text"><span class="LinkCard-title" data-text="true">参考文章</span></span></span></span></h2>
<p><span class="LinkCard-backdrop" style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;"><span class="LinkCard-content"><span class="LinkCard-text"><span class="LinkCard-title" data-text="true">https://juejin.im/post/5b4de6b7e51d45190d55340b</span></span></span></span></p>
<p>&nbsp;</p>
<div class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-125b2f0e763f42d360a2a5c5fa2f81e2_ipico.jpg" data-image-width="272" data-image-height="272" data-offset-key="6e18q-0-0">&nbsp;</div>
<h2 class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-125b2f0e763f42d360a2a5c5fa2f81e2_ipico.jpg" data-image-width="272" data-image-height="272" data-offset-key="6e18q-0-0"><span class="LinkCard-backdrop" style="font-size: 16px; font-family: &quot;Microsoft YaHei&quot;"><span class="LinkCard-content"><span class="LinkCard-text"><span class="LinkCard-title" data-text="true">知乎账号</span></span></span></span></h2>
<div class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-125b2f0e763f42d360a2a5c5fa2f81e2_ipico.jpg" data-image-width="272" data-image-height="272" data-offset-key="6e18q-0-0"><span class="LinkCard-backdrop" style="font-size: 14px; font-family: &quot;Microsoft YaHei&quot;"><span class="LinkCard-content"><span class="LinkCard-text"><span class="LinkCard-title" data-text="true">https://www.zhihu.com/people/peng-hu-wan-56/activities</span></span></span></span></div>
<div class="LinkCard FocusPlugin--unfocused LinkCard--hasImage" data-draft-node="block" data-draft-type="link-card" data-image="https://pic3.zhimg.com/v2-125b2f0e763f42d360a2a5c5fa2f81e2_ipico.jpg" data-image-width="272" data-image-height="272" data-offset-key="6e18q-0-0">&nbsp;</div>
<div class="Editable-unstyled" data-block="true" data-editor="dtpjc" data-offset-key="4170s-0-0">&nbsp;</div>

</div>
<div id="MySignature" role="contentinfo">
    我叫彭湖湾，请叫我胖湾<br><br>
来源：https://www.cnblogs.com/penghuwan/p/11366446.html

查看完整版本: 【JavaScript】当我们尝试用JavaScipt测网速