根据React中的网络和设备约束来优化图像

网络连接技术自互联网诞生以来发生了翻天覆地的变化。我们早已告别了拨号上网的时代，如今可以在移动网络上用智能手机观看高清视频。但并非所有移动网络连接都一样——老一代网络（3G、2G等）仍然占据主导地位，2020年全球近一半的连接都属于此类网络。

不幸的是，淘汰旧网络的过程非常缓慢，全球许多人仍然面临着页面加载缓慢的问题，这让人联想起家用互联网普及初期的情况。

现代网站变得资源密集型，包含大量图片和动画。对于使用低性能设备和不稳定网络连接的访问者来说，一个普通的网页可能需要一分钟才能完全加载。这主要是因为开发人员在处理用户硬件和网络状况时，往往会做出二元决策：设备要么属于台式机类别，要么属于智能手机类别；连接状态要么在线，要么离线。实际上，用户的环境往往更加细致复杂。

我们可以做得更好吗？

如何弥合那些使用低端设备和不稳定网络连接的用户之间的差距？首先，我们需要通过查看以下两个属性来快速评估他们的具体情况：

• navigator.deviceMemory
• navigator.connection

基于此，我们可以决定调整要提供的图像质量。然而，对于在服务器端渲染的Jamstack网站和应用程序来说，有一个问题——navigator对象以及任何其他浏览器API在渲染阶段都不可用。解决此问题的常用方法是添加大量响应式图像标记，但这带来了一个显著的痛点——低效的缩放。像ImageEngine这样的图像CDN可以帮助避免这个问题以及与响应式图像相关的其他陷阱，因为它通过对请求的资源进行即时自动智能调整来处理所有繁重的工作。

在适应用户网络限制方面，可以检测连接类型并指示图像CDN根据连接质量改变压缩率。以下是如何在React中实现这一点：

import React, { useState, useEffect } from 'react'

const useConnectionType = (defaultConnectionType) => {

  const isSupported = navigator?.connection?.effectiveType
    ? true
    : false

  const [connectionType, setNetworkStatus] = useState(
    isSupported
      ? navigator.connection.effectiveType
      : defaultConnectionType
  )

  useEffect(() => {
    if (isSupported) {
      const { connection } = navigator
      const updateConnectionType = () => {
        setNetworkStatus(connection.effectiveType)
      }

      connection.addEventListener('change', updateConnectionType)

      return () => {
        connection.removeEventListener('change', updateConnectionType)
      }
    }
  }, [])

  return [ connectionType, setNetworkStatus ]
}

const imageCDNHost = 'images.foo.com'

function ConnectionAwareComponent () {

  const [ connectionType ] = useConnectionType()

  let compressionLevel = 0

  switch (connectionType) {
    case 'slow-2g':
      compressionLevel = 65
      break
    case '2g':
      compressionLevel = 50
      break
    case '3g':
      compressionLevel = 30
      break
    case '4g':
      compressionLevel = 0
      break
  }

  return (
    <div>
      {/* 使用专用指令应用可变压缩 */}
      <img  src="%7B%60%24%7BimageCDNHost%7D/?imgeng?=cmpr_%24%7BcompressionLevel%7D%60%7D" alt="根据React中的网络和设备约束来优化图像" >
    </div>
  )
}

我们可以更进一步，为那些网络非常缓慢的用户提供模糊图像，并提供按需下载更高分辨率版本的选择。或者设计一个性能评分系统，并根据该系统调整发送的内容。

另一方面，用户使用“高速”4G连接并不一定意味着他们不关心节省数据，因为他们可能在漫游状态下访问网站。在网站上启用客户端提示将使网站所有者能够检测到数据节省标志的存在，并采取必要的步骤来适应用户的偏好。

更快图像的原因

中等CPU、适量的内存和低等级的连接并非虚构的限制。它们构成了真正的用户体验挑战，可能会影响全球数亿用户。一些公司开始将其产品融入包容性体验：像Netflix和Spotify这样的流媒体服务会根据您的网络状况调整流媒体质量，而许多其他公司则在幕后为用户进行自动图像优化。

在网络尚未普及的欠发达地区，可能并非目标市场。与此同时，如果为来自发达国家农村地区的用户提供网站的完整版本，他们可能会遇到令人不快的体验。我们可以通过一些小的调整来更体贴地调整发送/显示给用户的内容。

使用像ImageEngine这样的图像CDN可以简化图像优化过程，并自动响应网络限制的客户端提示。其结果是为网络受限的访问者提供更好的体验，并为开发人员提供优雅的工作流程。

以上是根据React中的网络和设备约束来优化图像的详细内容。更多信息请关注PHP中文网其他相关文章！