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

自互联网诞生以来，连接性已经发生了翻天覆地的变化。如今，我们已经远远超出了拨号上网的时代，可以在连接到移动网络的同时，在智能手机上观看高分辨率视频。但并非所有移动连接都是平等的——老一代网络（3G、2G 等）仍然占据着相当大的主导地位，在 2020 年，它们几乎占全球所有连接的一半。

不幸的是，淘汰过程非常缓慢，全球许多人正在经历页面加载缓慢的问题，这让人联想起家庭互联网普及初期的情况。

现代网站变得资源密集型，包含大量图像和动画。对于使用性能较低的设备和网络连接不稳定的访客来说，一个普通的网页可能需要一分钟才能完全加载。这在很大程度上是由于开发人员在处理用户硬件和网络状况时，往往会做出二元决策：设备要么属于桌面类别，要么属于智能手机类别，而连接性则是一个在线或离线的问题。实际上，用户的具体情况往往更加细致入微。

我们可以做得更好吗？

对于使用普通设备和网络连接不稳定的用户，可以采取哪些措施来弥合差距？首先，我们需要通过查看以下两个属性来快速评估他们的具体情况

基于此，我们可以决定调整要提供的图像质量。但是，对于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>
      {/* Apply variable compression via dedicated directive */}
      <img src={`${imageCDNHost}/?imgeng?=cmpr_${compressionLevel}`} />
    </div>
  )
}

可以进一步扩展这一想法，以适应那些网络缓慢且不稳定的用户，方法是渲染模糊的图像并提供按需下载更高分辨率版本的选项。或者设计一个性能评分系统，并根据该系统调整发送的内容。

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

图像加载更快的理由

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

网络尚未普及的欠发达地区可能并非目标市场。同时，如果向在发达国家偏远地区浏览的用户提供网站的完整版本，他们可能会遇到糟糕的体验。我们可以通过一些小的调整来更体贴和更有目的地调整发送/显示给用户的内容。

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

我们可以做得更好吗？

图像加载更快的理由

评论