如何使用网络信息API改进响应性网站

最新推荐文章于 2024-07-02 07:00:00 发布

dingshi7798

最新推荐文章于 2024-07-02 07:00:00 发布

阅读量79

点赞数

响应式Web设计彻底改变了Web。在多个不同的设备和屏幕上查看时，单个站点可以调整其布局。所需要的就是一些媒体查询，以检测屏幕尺寸并加载其他样式或样式表。

但是，使用屏幕尺寸检测浏览器功能类似于通过查看收音机来判断汽车的速度。现代智能手机和平板电脑的分辨率越来越大，并且会很高兴地显示出典型的桌面视图。如果该视图添加了许多字体，图像或其他资产，则移动用户可能会因为连接速度较慢或经过计量而获得了降级且昂贵的体验。

网络信息API

网络信息API可能会有所帮助。它指示用户是否处于计费连接（如按需付费），并提供带宽估计。使用此信息，可以有条件地加载图像，视频，字体和其他资源。从根本上讲，您可以覆盖媒体查询，以确保将移动版式保留在有限的网络上。

浏览器支持

尽管Network Information API规范草案已于2011年发布，但目前只有Firefox和Chrome提供实验性支持。在我们达成供应商的共识之前，API可能会更改：

评估带宽很困难。当您四处走动或在移动和Wi-Fi网络之间切换时，它可能会经常更改。网络容量可能不错，但并不能因此而可以连接到特定服务器。保持最新的带宽估计可能还会占用大量处理器和网络。
设备如何知道您的连接是否已计量？在我提到的一些酒店和机场中，即使是快速wi-fi，也可能会产生高昂的勒索成本。一种选择是设备在建立新连接时提示您。

幸运的是，我们可以使用对象检测来检测API的存在。

API基础

网络信息API对象由navigator.connection返回。为了确保跨浏览器的兼容性，我们需要：

var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

您可能希望将navigator.msConnection添加到该列表，尽管IE通常实现非前缀API。

我们的connection对象提供了两个只读属性：

带宽 —一个双精度值，表示对当前带宽的估计，以MB / s（兆字节/秒）为单位。如果用户处于脱机状态，则该值为零；如果无法确定，则该值为Infinity。请注意，大多数网络提供商都以兆比特/秒为单位引用值，典型的繁忙移动3G连接约为400Mbps〜= 400,000 bit / s〜= 50Kb / s〜= 0.05MB / s。
metered —一个布尔值，当为true ，意味着用户的连接受到限制，并且在可能的情况下应限制带宽的使用。

例如：

if (connection && !connection.metered && connection.bandwidth > 2) {
  // load high-resolution image
  var img = document.getElementById("kitten");

  img.src = "/images/kitten_hd.jpg";
}

最后，当连接状态更改时，我们可以执行change事件处理程序，例如

// default bandwidth
var highBandwidth = false;

// bandwidth change handler
function BandwidthChange() {
  highBandwidth = (!connection.metered && connection.bandwidth > 2);
  console.log(
    "switching to " +
    (highBandwidth ? "high" : "low") +
    " bandwidth mode"
  );
}

// Network Information object
var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;

// initialize
if (connection) {
  connection.addEventListener("change", BandwidthChange);
  BandwidthChange();
}

在此代码中，当高带宽可用时，全局highBandwidth变量将设置为true 。其他代码可能会做出相应的反应，例如，当highBandwidth为false ：

未加载高分辨率图像
未加载不必要的字体
Ajax轮询速度变慢
Ajax超时参数增加

为了使事情变得容易一些，您可以在BandwidthChange函数中将一个类附加到body标签，例如

// bandwidth change handler
function BandwidthChange() {
  highBandwidth = (!connection.metered && connection.bandwidth > 2);

  var body = document.body;

  if (highBandwidth) {
    body.classList.add("hibw");
  }
  else {
    body.classList.remove("hibw");
  }

  console.log(
    "switching to " +
    (highBandwidth ? "high" : "low") +
    " bandwidth mode"
  );
}

这使我们可以有条件地在CSS中加载诸如背景图片之类的项目，例如

/* low bandwidth plain-color background */
#myelement
{
  background-color: #ccc;
}

/* high bandwidth image background */
body.hibw #myelement
{
  background: url(image.jpg) 0 0 no-repeat;
}

仍然可以在由媒体查询加载的桌面布局中检查此情况。

您应该使用网络信息API吗？

在撰写本文时，Network Information API几乎没有浏览器支持，并且可能会更改。就是说，如果您要创建一个必须在移动设备上运行的网站或应用程序，那么现在进行一些规划可能会阻止您的页面达到1.7Mb 。如果API发生更改，您只需要更新BandwidthChange函数，您的网站就会做出适当的反应。

我当然认为Network Information API是值得考虑的。 你做？

From: https://www.sitepoint.com/use-network-information-api-improve-responsive-websites/