1. 首页
  2. css

CSS根据React中的网络和设备限制优化图像

自从互联网诞生以来,连接性的发展已经超出了人们的认知范围。如今,我们已经过了拨号光年,可以在连接到移动网络的同时在智能手机上观看高分辨率的视频。但并非所有的移动连接都是平等的——老一代网络(3G、2G等)仍然占据主导地位,在2020年占全球所有连接的近一半。
不幸的是,逐步淘汰的过程非常缓慢,世界各地的许多人都在经历非常拖沓的页面加载,这可与家庭互联网采用的早期阶段相媲美。
现代网站变得资源匮乏,以大量图片和动画为特色。对于一个在动力不足的设备和脆弱的网络连接上的访问者来说,一个网页可能需要很长的时间才能完全加载。这在很大程度上是因为,当涉及到用户的硬件和网络条件时,开发人员往往会做出二元决定:设备要么属于台式机,要么属于智能手机,而连接则是一个在线或离线的问题。实际上,用户的情况往往更加微妙。我们能做得更好吗?
对于使用普通设备和不稳定连接的用户来说,怎样才能缩小差距?首先,我们需要通过查看以下两个属性来快速评估它们的具体情况:
– navigator.deviceMemory
– navigator.connection
基于此,我们可以决定,例如,调整我们要服务的图像的质量。然而,在服务器上呈现的Jamstack网站和应用程序有一个问题–\”navigator\”对象和其他浏览器API一样,在呈现阶段不可用。解决这个问题的一个常见方法是添加一堆响应性很强的图像标记,但它也带来了一个重要的难点——缩放效率低下。像图像CDN一样的ImageEngine有助于避免这种和其他与响应图像相关的陷阱,因为它通过动态地对请求的资源应用自动化、智能的调整来处理所有幕后繁重的工作。
当涉及到适应用户的网络限制时,可以检测连接类型并指示图像CDN根据连接质量改变压缩。在React中可以这样做:
import React,{useState,useffect}from\”React\”const=>{const=useState(isSupported?navigator.connection.effectiveType:=navigatorconst=>{setNetworkStatus(连接.有效类型)}connection.addEventListener接口(\”change\”,updateConnectionType)return=images.foo.com函数connectionWareComponent(){const[connectionType=0switch(connectionType){case=50breakcase=0break}返回(<div>{/*通过专用指令应用可变压缩*/}<img src=>。或者设计一个性能评分系统,并在此基础上调整发送的内容。另一方面,用户使用\”快速\”4G连接并不一定意味着他们对保存数据不感兴趣,因为他们可能正在漫游访问网站。在网站上启用客户端提示可以让网站所有者检测到数据保存标志的存在,并采取必要的步骤来调整用户的偏好。
图像速度更快的原因
CPU一般、内存量适中和连接级别较低不是想象中的限制。它们带来了真正的用户体验挑战,可能影响到全球数亿用户。一些公司开始将包容性体验融入到产品中:流媒体服务如Netflix和Spotify会根据您的网络状况调整流媒体质量,而其他许多公司则在幕后为用户进行自动图像优化。
发展中地区,在这些地区,还没有人人都可以访问快速网络在任何地方,都可能不是一个人的目标市场。同时,从发达国家农村地区浏览网页的人,如果得到一个成熟版本的网站,可能会有不愉快的经历。我们可以通过调整发送/显示给用户的内容来更加体贴和有意,只需做几个小的调整。
使用类似于图像CDN的图像引擎可以简化图像优化过程,并自动响应客户端对网络限制的提示。其结果是为网络受限的访问者提供更好的体验,为开发人员提供优雅的工作流程

CSS根据React中的网络和设备限制优化图像 为WP2原创文章,链接:https://www.wp2.cn/css/css%e6%a0%b9%e6%8d%aereact%e4%b8%ad%e7%9a%84%e7%bd%91%e7%bb%9c%e5%92%8c%e8%ae%be%e5%a4%87%e9%99%90%e5%88%b6%e4%bc%98%e5%8c%96%e5%9b%be%e5%83%8f/