使用JavaScript和网络信息API进行自适应网络服务
栏目: JavaScript · 发布时间: 7年前
内容简介：根据网络速度进行不同的内容推送，比如网速速度慢就推送分辨率低的图片，这种自适应网络服务是使用专门的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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- 未知网络服务分析之调试技巧
- Istio网络服务网格 超越Kubernetes技术
- Go36-46-访问网络服务（socket）
- Kafka 服务端 网络层 架构
- linux入门系列11--Centos7网络服务管理
- Netty 4.1.16.Final 发布，Java 网络服务框架
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
30天自制操作系统
[日] 川合秀实 / 周自恒、李黎明、曾祥江、张文旭 / 人民邮电出版社 / 2012-8 / 99.00元
自己编写一个操作系统，是许多程序员的梦想。也许有人曾经挑战过，但因为太难而放弃了。其实你错了，你的失败并不是因为编写操作系统太难，而是因为没有人告诉你那其实是一件很简单的事。那么，你想不想再挑战一次呢？ 这是一本兼具趣味性、实用性与学习性的书籍。作者从计算机的构造、汇编语言、C语言开始解说，让你在实践中掌握算法。在这本书的指导下，从零编写所有代码，30天后就可以制作出一个具有窗口系统的32位......一起来看看 《30天自制操作系统》 这本书的介绍吧!
