如何使用网络信息API来改善响应式网站

钥匙要点

• >网络信息API可以通过提供有关用户网络连接的信息，包括它是否是计量和带宽的估计来显着增强用户体验。此信息可用于有条件地加载图像，视频，字体等，即使在较慢或计量的连接上也确保最佳性能。
>
• 实现网络信息API涉及使用JavaScript访问API的属性和方法。 API对象由Navigator.Connection返回，并提供两个仅读取属性：带宽和计量。这些属性可用于根据用户的连接状态有条件地加载高分辨率图像或其他大资产。
尽管具有潜在的好处，但网络信息API当前的浏览器支持有限，并且可能会发生变化。但是，对于移动友好的网站或应用程序，仍然值得考虑，因为它可以帮助防止页面变得太大且在移动网络上加载缓慢。如果API更改，则可以对相关功能进行更新，以确保站点继续做出适当的反应。
• 响应式网络设计彻底改变了网络。当在一系列不同的设备和屏幕上查看时，一个站点可以调整其布局。所需的只是一些媒体查询，以检测屏幕尺寸并加载替代样式或样式表。 但是，使用屏幕尺寸来检测浏览器功能类似于通过查看无线电来判断汽车的速度。现代智能手机和平板电脑的分辨率越来越大，并且会愉快地显示出典型的桌面视图。如果该视图添加了许多字体，图像或其他资产，则移动用户可能会收到降级 - - 体验，因为它们处于较慢或计量的连接上。

网络信息api 网络信息API可能会有所帮助。它指示用户是否处于计量连接（例如付款方式），并提供带宽的估计值。使用此信息，可以有条件地加载图像，视频，字体和其他资源。在基本层面上，您可以覆盖媒体查询，以确保在有限的网络上保留移动布局。 >浏览器支持

尽管网络信息API草案规范在2011年发布，但此时仅提供Firefox和Chrome提供实验支持。在我们获得供应商共识之前，API可能会发生变化：

评估带宽很困难。当您在移动和Wi-Fi网络之间移动或切换时，它可能会经常发生变化。网络容量可能很好，但是与特定服务器的连接不会得出。保持带宽估算值也可能是处理器和网络密集型。

>该设备如何知道您的连接是否已计？即使是快速的Wi-Fi，我可以提到的某些酒店和机场也可能会勒索成本。一个选项是让设备在建立新连接时提示您。

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

api基础知识

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

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

您可能需要将Navigator.msconnection添加到该列表中，尽管IE通常会实现非排名的API。 我们的联系 对象提供两个只读属性：

• 带宽 - 双重表示Mb/s（每秒兆字节）的当前带宽的估计。如果用户离线和无穷大，则该值将为零。请注意，大多数网络提供商每秒引用了Megabits中的值，典型的繁忙移动3G连接将约为400Mbps〜 = 400,000位/s〜 = 50kb/s〜 = 0.05MB/s。
metered - 一个布尔值，如果是，则意味着用户的连接受到限制，并且在可能的情况下应限制带宽的使用。
例如：

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

<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>

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

<span>// default bandwidth
</span><span>var highBandwidth = false;
</span>
<span>// bandwidth change handler
</span><span>function <span>BandwidthChange</span>() {
</span>highBandwidth <span>= (!connection.metered && connection.bandwidth > 2);
</span><span>console.log(
</span><span>"switching to " +
</span><span>(highBandwidth ? "high" : "low") +
</span><span>" bandwidth mode"
</span><span>);
</span><span>}
</span>
<span>// Network Information object
</span><span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
</span>
<span>// initialize
</span><span>if (connection) {
</span>connection<span>.addEventListener("change", BandwidthChange);
</span><span><span>BandwidthChange</span>();
</span><span>}</span>

高分辨率图像未加载
不必要的字体未加载
ajax轮询放缓
ajax超时参数增加了

为了使事情变得容易一点，您可以将课程附加到带宽截图中的身体标签上 功能，例如

<span>var connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;</span>

这使我们能够有条件地加载项目，例如CSS中的背景图像，例如

<span>if (connection && !connection.metered && connection.bandwidth > 2) {
</span><span>// load high-resolution image
</span><span>var img = document.getElementById("kitten");
</span>
img<span>.src = "/images/kitten_hd.jpg";
</span><span>}</span>

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

您是否应该使用网络信息API？ 在撰写本文时，网络信息API几乎没有浏览器支持，并且可能会更改。就是说，如果您要创建必须在移动设备上使用的网站或应用程序，那么现在一些计划可以阻止您的页面达到1.7MB。如果API发生变化，您只需要更新带宽的函数，您的网站将做出适当的反应。 我当然认为网络信息API值得考虑。

你吗？ 关于网络信息API

的常见问题（常见问题解答）

>网络信息API是什么，它如何工作？

>网络信息API是一个工具，可提供有关设备用于与Web通信的网络连接的信息。它允许Web应用程序访问设备网络类型和速度的状态，可用于优化内容交付。例如，如果用户在慢速网络上，则网站可以选择发送较低质量的图像以提高负载时间。

>

>我如何使用网络信息API来改善我的响应式网站？ 🎜>网络信息API可用于增强您响应网站上的用户体验。通过检测用户的网络条件，您可以相应地调整网站的行为。例如，如果用户的网络缓慢，则可以减少发送的数据量，例如较低的分辨率图像或更少的视频内容。这可以显着提高网站的加载速度和整体性能。

是否所有浏览器支持的网络信息API？

>网络信息API不受所有浏览器的支持。截至目前，它得到了Chrome，Opera和Android浏览器的支持。在实施任何新的API之前，请在“我可以使用”等网站上查看最新的浏览器兼容性信息。 >实现网络信息API涉及使用JavaScript访问网络信息API的属性和方法。您可以使用Navigator.connection或Navigator.MozConnection属性来获取代表用户连接的网络信息对象，然后使用此对象的属性和事件处理程序来获取有关连接的信息并对连接中的更改做出反应。

>

>我可以从网络信息API中获取哪些信息？>

检测离线状态吗？ Navigator.Online属性返回一个布尔值，该值指示用户的设备在线还是离线。是一个估计值，可能不是完全准确的。它基于最近观察到的网络条件，可能无法反映当前网络条件。因此，应将其用作指南，而不是网络条件的确定性度量。

>

可以与服务工作者一起使用网络信息API吗？与服务工作者。这使您可以根据用户的网络条件来调整服务工作者的行为，例如当用户在慢速网络上时更积极地缓存。

使用网络信息API有什么隐私含义？

>

网络信息API可能会根据其网络条件来用于指纹用户。但是，API仅提供有关网络的粗粒信息，并且该信息也可用于本机应用程序，因此额外的隐私风险最小。

网络信息API的使用情况有哪些？网络信息API可用于改善用户体验。例如，视频流网站可以根据用户的网络速度自动选择适当的视频质量。新闻网站可以使用它来决定是加载高分辨率图像还是低质量图像。网络应用程序可以在慢速网络上警告用户，并且某些功能可能无法最佳地工作。

以上是如何使用网络信息API来改善响应式网站的详细内容。更多信息请关注PHP中文网其他相关文章！