[译]使用 JavaScript 和网络信息 API 实现自适应服务

栏目: JavaScript · 发布时间: 6年前

内容简介:effectiveType 是

navigator.connection.effectiveType 可以根据用户的网络连接质量得出不同的结果

[译]使用 JavaScript 和网络信息 API 实现自适应服务

effectiveType 是 Network Information API 的一个属性,在 JavaScript 中通过navigator.connection 对象在调用。在 Chrome 浏览器中,你可以把以下内容放入 DevTools 中来查看有效的连接类型(ECT):

console.log(navigator.connection.effectiveType); // 4G
复制代码

effectiveType 可取值有 'slow-2g'、'2g'、'3g' 或者 '4g'。在网速慢的时候,此功能可以让你通过提供较低质量的资源来提高页面的加载速度。

在 Chrome 62 之前,我们只向开发者公布了理论上的网络连接类型(通过 navigator.connection.type )而不是客户端实际的网络连接质量。

Chrome 的有效连接类型目前是使用最近观察到的往返时间(rtt)和下行链路值的组合来确定。

它将测量到的网络连接性能总结为最接近的蜂窝网络连接类型(比如 2G),即使你实际连接的的 WiFi。如图所示,你连接了星巴克的WiFi,但是实际上你的有效网络类型是 2G 或者 3G。

[译]使用 JavaScript 和网络信息 API 实现自适应服务

如何应对网络连接质量的变化呢?我们可以通过 connection.onchange 事件监听器来监听网络变化:

function onConnectionChange() {
    const { rtt, downlink, effectiveType,  saveData } = navigator.connection;

    console.log(`有效网络连接类型: ${effectiveType}`);
    console.log(`估算的下行速度/带宽: ${downlink}Mb/s`);
    console.log(`估算的往返时间: ${rtt}ms`);
    console.log(`打开/请求数据保护模式: ${saveData}`);
}

navigator.connection.addEventListener('change', onConnectionChange)
复制代码

下面是一个快速测试,我在 DevTools 中模拟了一个 “低网速的手机” 的配置,并且能够从 “4g” 切换到 ”2g“:

[译]使用 JavaScript 和网络信息 API 实现自适应服务

effectiveType 在安卓上的 Chrome、Opera 和 Firefox 得到了支持,有些其它的网络质量提示可以在 navigator.connection 中查看,包括 rttdownlinkdownlinkMax

我在基于 Vue.js 的开源项目 ——Google Doodles 应用中使用过 effectiveType。基于 ECT 值,我们可以通过使用数据绑定就能够把 connection 属性设置为 fast 或者 slow 。大致如下:

if (/\slow-2g|2g|3g/.test(navigator.connection.effectiveType)) {
  this.connection = "slow";
} else {
  this.connection = "fast";
}
复制代码

这可以让我们去根据用户的有效连接类型呈现不同的输出(视频或者低分辨率图片)。

<template>
      <div id="home">
        <div v-if="connection === 'fast'">
          <!-- 1.3MB video -->
          <video class="theatre" autoplay muted playsinline control>
            <source src="/static/img/doodle-theatre.webm" type="video/webm">
            <source src="/static/img/doodle-theatre.mp4" type="video/mp4">
          </video>
        </div>
        <!-- 28KB image -->
        <div v-if="connection === 'slow'">
          <img class="theatre" src="/static/img/doodle-theatre-poster.jpg">
        </div>
      </div>
   </template>
复制代码
[译]使用 JavaScript 和网络信息 API 实现自适应服务

Max Böck 写了一篇关于使用 React网络感知组件的文章,蛮有意思。他提出了如何根据网络速度渲染不同的组件:

switch(connectionType) {
    case '4g':
        return <Video src={videoSrc} />

    case '3g':
        return <Image src={imageSrc.hires} alt={alt} />

    default:
        return <Image src={imageSrc.lowres} alt={alt} />
}
复制代码

注意:你可以将 effectiveType 和 Service Workers 搭配使用来应对由于慢速连接而离线了的用户。

调试的话,你可以使用 Chrome flag "force-effective-connection-type" 来覆写网络质量估算,这个 flag 可以在 chrome://flags 中设置。DevTools 网络模拟也可以也可以为 ETC 提供有限的调试体验。

effectiveType 值也同样可以通过客户端提示公开,允许开发者将 Chrome 的网络连接速度传达给服务器。

如果发现译文存在错误或其他需要改进的地方,欢迎到 掘金翻译计划 对译文进行修改并 PR,也可获得相应奖励积分。文章开头的 本文永久链接 即为本文在 GitHub 上的 MarkDown 链接。

掘金翻译计划 是一个翻译优质互联网技术文章的社区,文章来源为掘金 上的英文分享文章。内容覆盖 AndroidiOS前端后端区块链产品设计人工智能 等领域,想要查看更多优质译文请持续关注 掘金翻译计划 、官方微博、 知乎专栏


以上所述就是小编给大家介绍的《[译]使用 JavaScript 和网络信息 API 实现自适应服务》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Introduction to Linear Optimization

Introduction to Linear Optimization

Dimitris Bertsimas、John N. Tsitsiklis / Athena Scientific / 1997-02-01 / USD 89.00

"The true merit of this book, however, lies in its pedagogical qualities which are so impressive..." "Throughout the book, the authors make serious efforts to give geometric and intuitive explanations......一起来看看 《Introduction to Linear Optimization》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具