使用JavaScript和网络信息API进行自适应网络服务

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

内容简介：根据网络速度进行不同的内容推送，比如网速速度慢就推送分辨率低的图片，这种自适应网络服务是使用专门的API实现。navigator.connection.effectiveType 可用于根据用户网络连接的质量提供不同的内容。effectiveType是Network Information API的一个属性，通过navigator.connection对象向JavaScript公开。在Chrome中，您可以将以下内容放入DevTools以查看有效的连接类型（ECT）：console.log(navigat

根据网络速度进行不同的内容推送，比如网速速度慢就推送分辨率低的图片，这种自适应网络服务是使用专门的API实现。navigator.connection.effectiveType 可用于根据用户网络连接的质量提供不同的内容。

effectiveType是Network Information API的一个属性，通过navigator.connection对象向JavaScript公开。在Chrome中，您可以将以下内容放入DevTools以查看有效的连接类型（ECT）：

console.log(navigator.connection.effectiveType); // 4G

可能的值为effectiveType'slow-2g'，'2g'，'3g'或'4g'。在慢速连接上，此功能允许您通过提供较低质量的资源来提高页面加载速度。

如何应对网络质量的变化？我们可以使用connection.onchange事件监听器来监控连接变化：


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

    console.log(`Effective network connection type: ${effectiveType}`);
    console.log(`Downlink Speed/bandwidth estimate: ${downlink}Mb/s`);
    console.log(`Round-trip time estimate: ${rtt}ms`);
    console.log(`Data-saver mode on/requested: ${saveData}`);
}

navigator.connection.addEventListener('change', onConnectionChange)

effectiveType在Android上的Chrome，Opera和Firefox支持。其他的一些网络质量提示可在navigator.connection包括rtt，downlink和downlinkMax。

在Vue.js中，使用数据绑定，我们能够将connection属性设置为fast或者slow基于ECT值。大致是：


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  type="video/webm">
            <source  type="video/mp4">
          </video>
        </div>
        <!-- 28KB image -->
        <div v-if="connection === 'slow'">
          <img class="theatre" >
        </div>
      </div>
    </div>
   </template>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

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

码农书籍

精通Java并发编程（第2版）

[西] 哈维尔·费尔南德斯·冈萨雷斯 / 唐富年 / 人民邮电出版社 / 2018-10 / 89.00元

Java 提供了一套非常强大的并发API，可以轻松实现任何类型的并发应用程序。本书讲述Java 并发API 最重要的元素，包括执行器框架、Phaser 类、Fork/Join 框架、流API、并发数据结构、同步机制，并展示如何在实际开发中使用它们。此外，本书还介绍了设计并发应用程序的方法论、设计模式、实现良好并发应用程序的提示和技巧、测试并发应用程序的工具和方法，以及如何使用面向Java 虚拟机的......一起来看看《精通Java并发编程（第2版）》这本书的介绍吧!

码农工具

使用JavaScript和网络信息API进行自适应网络服务

精通Java并发编程（第2版）

图片转BASE64编码

MD5 加密

SHA 加密